总结js/jQ实现滚动条效果方法-js教程-PHP中文网

总结js/jQ实现滚动条效果方法

巴扎黑

发布： 2017-06-07 11:44:24

原创

2267人浏览过

之前有篇文章《html页面滚动条相关设置总结》，主要说的是如何通过css去设置滚动条的样式，颜色等，今天就总结下如何通过js/jq设置滚动条：

jquery实现立体式数字滚动条增加效果，代码分为两部分，一部分位html结构另一部分属于js代码段，需要的朋友参考下吧！

本文主要介绍了js实现简易垂直滚动条的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧

本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。

BibiGPT-哔哔终结者

B站视频总结器-一键总结音视频内容

通常情况下，当内部滚动条滚动到两端时，再接着滚动时外层的滚动条就会跟着滚动；可是有时我们希望用户只能滚动当前区域，而不触发外层（window）的滚动条，离开当前区域后，才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了，导致当前区域离开可视区域。

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的

登录后复制

要获取顶端，只需要获取到scrollTop()==0的时候就是顶端；

要获取底端，只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了；

以上就是总结js/jQ实现滚动条效果方法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：