13919049954

网页设计时,如何禁止浏览器滚动条滚动

作者:金城在线 日期:2017/12/11 9:49:13 人气:315

正好项目需要, 记录一下,方便遇到这个问题的朋友。


场景: 点击按钮后弹出暗层, 暗层上有组建需要滚动。需求是暗层里的组建可以使用滚动条, 暗层下的不能同时滚动。


不能用overflow:hidden的方式, 因为原来的必须可以滚动, 如果暗层出来设置overflow:hidden的话会使视窗中的界面突然变宽。


最开始想的想法是禁止document的滚动,并且单独给弹窗内需要滚动的组建绑定事件,不冒泡上去。

最后发现不行,虽然document不滚动了, 但是弹窗是position:fixed的,只要鼠标在弹窗的可滚动的元素上,当这个元素的滚动条到底部或者顶部时, 暗层下面的东西还是会滚动,并且没有触发document的滚动。


解决方式是 再给弹窗上的元素绑定滚动事件里面加限制条件:当弹窗中的元素的滚动条滚动到底部或者顶部时,判断滚动是向下还是向下。如果在顶部,且还在向上滚动,则禁止了默认事件。反之。


            金城在线专注网站、软件、APP、微信公众平台、小程序、抖音、头条等开发推广,如果您有这方面的需求或者不同的观点,欢迎联系交流。

    官方微信

    本文网址:http://lz.net.cn/zixunzhongxin/566.html
    读完这篇文章后,您心情如何?
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    更多>>网友评论
    发表评论