1、设置常规的滚动条:使用 overflow:auto。父元素需要设置一个高度,设置相对定位,这样子元素的高度大于父元素高度才能显示滚动条。如果父元素的高度完全由子元素撑开,界面上不会出现滚动条。设置overflow:auto 失效的主要问题:可能是这个div没有设置 100% 然后父元素清除浮动 (float:none; position: relative;)
2、设置鼠标经过显示的滚动条:预设值盒子是 hidden。当鼠标经过这样盒子时,设置盒子的overflow 变成 auto。这样鼠标不经过时不会显示滚动条。缺点:如果盒子内部有文字,盒子的宽度变化可能造成文字的重新排版,视觉上有点不好看。
如果内容宽度是百分比或者flex布局,鼠标移动会造成宽度变化,所以可以使用下面的改进版,不同情况父元素设置不同的宽度.
3、设置界面可以滚动但是不显示滚动条
方法一:设置滚动条的样式(在 webkit 内核的浏览器比较适合)这样可以同时设置滚动条的宽度和颜色。这种办法很好。
方法二:右侧元素设置宽度或者定位,将左侧元素的滚动条遮挡。这样的方法不入流,在移动端兼容不好实现。
4、系统兼容性和浏览器兼容性
系统兼容性:Windows 下,浏览器需要加上 body { overflow-y: auto } 可以不显示滚动条,Mac 系统下没有这个问题。
浏览器兼容性:webkit 内核浏览器使用 -webkit-scrollbar
效果明显,其他内核效果不明显。
在火狐浏览器下,-webkit-scrollbar 无效,可以使用 scrollbar-width: none;
这样不会显示滚动条
箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。