关于滚动条

原创 笑靥 随笔 应用类 170阅读 2018-08-22 15:56:54 举报

隐藏滚动条的方法

由于不同浏览器的滚动条样式不一致,往往需要对滚动条隐藏。

  • 无序列表利用滚动条的宽度,留出一定的偏移量(大约为17px),利用两层嵌套,外层设置溢出隐藏,内层设置溢出可滚动,宽度比外层元素大一定偏移量,这样就可以实现滚动条隐藏。

上述实现方法,会使内层容器的宽度大于外层元素,在一些与宽度相关的样式实现时需要进行另外处理。

  • 使用负margin+正padding的方式,利用两层嵌套,外层设置溢出隐藏,内层设置溢出可滚动.内层滚动元素设置宽度与外层等宽,并设置负margin和padding,实现视觉上滚动条的消失。

注意上述实现方法,内层元素的box-sizing为content-box;

  • 利用css实现,利用浏览器支持的对滚动条样式的css设置,实现滚动条隐藏

上述实现方法的问题在于浏览器的兼容性,有些浏览器不支持滚动条样式的css设置。

一种实用的滚动条插件

由于在一些场合下,还是需要显示滚动条,并且对滚动条的样式有一定要求。此时我们可以使用滚动条插件实现。
在这里推荐一种jQuery滚动条插件---myCustormScrollbar。使用方法可参考:https://www.jianshu.com/p/550466260856

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复