自定义滚动条(Custom scrollbars)

HTML/CSS IT屋
.com / buzinas / simple-scrollbar“rel =”noreferrer“>名为SimpleScrollbar的自定义滚动条库

它不依赖于任何其他库/框架,它在gzip和缩小后小于1KB。



它使用原生滚动,所以没有黑客,性能也很棒。






您只需将图书馆加入您的网页,请在任何要制作可滚动的div中使用 ss-container 属性。现场示例:

< link href =“http://buzinas.github.io/simple-scrollbar/simple-scrollbar.css”
 

支持所有Android,iOS和Windows Phone浏览器。






如果你想自动找出所有已经有滚动条的元素,你可以这样做:



  //在页面中的所有内容加载
之后document.addEventListener('DOMContentLoaded',function(){
//获取所有元素您的页面
var elements = document.querySelectorAll('*'),el;
for(var i = 0; i< elements.length,el = elements [i]; i ++){
//如果scrollheight高于clientheight,那是因为它有一个滚动条
if(el.scrollHeight> el.clientHeight){
SimpleScrollbar.initEl(el); //打开元素放入一个SimpleScrollbar中
}
}
});

本文地址:IT屋 » 自定义滚动条

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起
官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注与百万开发者在一起