当前位置:Gxlcms > JavaScript > 总结js/jQ实现滚动条效果方法

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

时间:2021-07-01 10:21:17 帮助过:33人阅读

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

1.使用jQuery实现立体式数字滚动条增加效果实例

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

c766d33f0e428b5f6211916e0ddcc43f.png

2.js实现简易垂直滚动条

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

545ef9001d6b8fd1b724fcbafbfd3d36.jpg

3.原生js封装自定义滚动条的代码案例分享

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

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

5dfa4216030c5a72f0091d5cbd8fdc0a.png

4.利用jquery禁止外层滚动条的滚动

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

63f5a7f3ccb0c9a37d4da9b00e1afe0b.jpg

5.jquery 判断滚动条到达了底部和顶端的方法

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

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

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

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

人气教程排行