网页设计时，如何禁止浏览器滚动条滚动作者：协策网络-市场部 标签：企业网页设计 日期：2014年03月03日 类别：网站建设 |
||||
正好项目需要， 记录一下，方便遇到这个问题的朋友。
场景： 点击按钮后弹出暗层， 暗层上有组建需要滚动。需求是暗层里的组建可以使用滚动条， 暗层下的不能同时滚动。
不能用overflow：hidden的方式， 因为原来的必须可以滚动， 如果暗层出来设置overflow：hidden的话会使视窗中的界面突然变宽。
最开始想的想法是禁止document的滚动，并且单独给弹窗内需要滚动的组建绑定事件，不冒泡上去。
最后发现不行，虽然document不滚动了， 但是弹窗是position:fixed的，只要鼠标在弹窗的可滚动的元素上，当这个元素的滚动条到底部或者顶部时， 暗层下面的东西还是会滚动，并且没有触发document的滚动。
解决方式是 再给弹窗上的元素绑定滚动事件里面加限制条件：当弹窗中的元素的滚动条滚动到底部或者顶部时，判断滚动是向下还是向下。如果在顶部，且还在向上滚动，则禁止了默认事件。反之。正好项目需要， 记录一下，方便遇到这个问题的朋友。
场景： 点击按钮后弹出暗层， 暗层上有组建需要滚动。需求是暗层里的组建可以使用滚动条， 暗层下的不能同时滚动。
不能用overflow：hidden的方式， 因为原来的必须可以滚动， 如果暗层出来设置overflow：hidden的话会使视窗中的界面突然变宽。
最开始想的想法是禁止document的滚动，并且单独给弹窗内需要滚动的组建绑定事件，不冒泡上去。
最后发现不行，虽然document不滚动了， 但是弹窗是position:fixed的，只要鼠标在弹窗的可滚动的元素上，当这个元素的滚动条到底部或者顶部时， 暗层下面的东西还是会滚动，并且没有触发document的滚动。
解决方式是 再给弹窗上的元素绑定滚动事件里面加限制条件：当弹窗中的元素的滚动条滚动到底部或者顶部时，判断滚动是向下还是向下。如果在顶部，且还在向上滚动，则禁止了默认事件。反之。  您可能感兴趣的文章推荐 |
||||
|
协策网络公司拥有专业的网站建设开发团队，超过四年以上的网站建设、网页制作经验，我们可承接企业电子商务网站建设、企业展示型网页设计和功能型网站制作等各类型网站设计制作。
COPYRIGHT © 上海协策网络科技有限公司 2008-2014 网站地图 SITEMAP 上海做网站公司 沪ICP备08009778号
地址：上海市共和新路425号凯鹏国际大厦13楼G座（近3、4、8号线）
电话：021-51085186 传真：021-56555059 咨询：+(86)18018609689