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

haibao 笔记 2016-02-29 13:07 1269
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共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/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

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