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

作者: haibao 分类: 笔记 发布时间: 2016-02-29 13:07
授人以鱼不如授人以渔!授人以鱼只救一时之急, 授人以渔则可解一生之需。

开场白省略…

场景描述:

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

滚动左边的时候,这时候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],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>