当前位置:

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

本文最后更新于2016-02-29,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共417个字,读完预计2分钟。

开场白省略…

场景描述:

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

单页面禁止多个滚动条同时滚动的JS-何海宝的博客

滚动左边的时候,这时候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>

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

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

我要说两句