隐藏滚动条,纯css实现

隐藏滚动条,纯css实现

原理就是嵌套三层DOM节点,举例如下:第一层width:200px,第二层width:220px,多出来的20px就是大于滚动条的宽度,第三层就是现实的宽度,假定也是width:200px

div.class1>div.class2>div.class3




  
  
  
  Document
  


  
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'
'123'

此外也有一些针对性的写法,比如

.ul::-webkit-scrollbar {
    /* 这种只会针对浏览器内核为webkit的浏览器生效,灵活性和兼容性较差 */
    display: none;
}

你可能感兴趣的:(隐藏滚动条,纯css实现)