当前位置: 首页 » 前端开发 » 单页面禁止多个滚动条同时滚动的JS
 |  全屏浏览  |  字号调整:

单页面禁止多个滚动条同时滚动的JS

2016-02-29 13:07:49 前端开发 0 1.54 k 百度已收录
本文最后更新于2016-02-29,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六晚上好, 本文除去代码部分,共417个字,预计阅读时间需要2分钟。

开场白省略…

场景描述:

一个页面中,分左右布局,且两边都是有滚动条的情况下。如图:

滚动左边的时候,这时候body的滚动条也开始滚动了,但是! 我不想让body的滚动条也滚动,所以出现下面的几句代码,如果大家有更好的方法,欢迎留言说出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--html 代码结构 左右浮动,且都有滚动条的情况下-->
<div class="wrap">
   <div class="left"></div>
   <div class="right"></div>
</div>
 
<!--js-->
<script>
//左侧滑动时 禁止滚动条
    document.querySelector('.left').addEventListener('touchmove',function(e){
        document.body.style.overflow = 'hidden';
    },false);
 
 //右侧滑动时 开启滚动条
    document.querySelector('.right').addEventListener('touchmove',function(e){
        document.body.style.overflow = 'auto';
    },false);
</script>

好了,此篇结束,文章虽短,但也是一种经验分享,希望大家不吝赐教。谢谢~~

本文标题:单页面禁止多个滚动条同时滚动的JS

本文地址:http://www.hehaibao.com/js-listener-touchmove/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

电子邮件地址不会被公开。 必填项已用*标注