Javascript 防止整页滚动iOS_Javascript_Html_Ios_Css_Mobile Safari

Javascript 防止整页滚动iOS

javascript html ios css

Javascript 防止整页滚动iOS,javascript,html,ios,css,mobile-safari,Javascript,Html,Ios,Css,Mobile Safari,在Mobile Safari下，是否可以允许一个绝对定位的div滚动，而不允许整个页面在滚动到达边缘时上下摆动（弹性滚动）以下是我面临的问题的一个最简单的工作示例： <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximu

在Mobile Safari下，是否可以允许一个绝对定位的

div

滚动，而不允许整个页面在滚动到达边缘时上下摆动（弹性滚动）

以下是我面临的问题的一个最简单的工作示例：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #a, #b {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            padding: 10px;
            overflow: auto;
        }
        #a {
            width: 80px;
            background: #f00;
        }
        #b {
            background: #00f;
            left: 80px;
            width: 100%;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        function pdcb(e) {
            e.preventDefault();
        }
        function npcb(e) {
            e.stopPropagation();
        }
        $(document).on('touchstart touchmove', pdcb).
                    on('touchstart touchmove', '.scrollable', npcb);
    </script>
</head>
<body>
    <div id="a" class="scrollable">
        This<br>
        should<br>
        be<br>
        scrollable<br>
        but<br>
        not<br>
        scroll<br>
        the<br>
        whole<br>
        page<br>
        This<br>
        should<br>
        be<br>
        scrollable<br>
        but<br>
        not<br>
        scroll<br>
        the<br>
        whole<br>
        page<br>
        This<br>
        should<br>
        be<br>
        scrollable<br>
        but<br>
        not<br>
        scroll<br>
        the<br>
        whole<br>
        page<br>
        This<br>
        should<br>
        be<br>
        scrollable<br>
        but<br>
        not<br>
        scroll<br>
        the<br>
        whole<br>
        page<br>
        This<br>
        should<br>
        be<br>
        scrollable<br>
        but<br>
        not<br>
        scroll<br>
        the<br>
        whole<br>
        page<br>
    </div>
    <div id="b">
        this should never scroll
    </div>
</body>
</html>


* {
保证金：0；
填充：0；
框大小：边框框；
}
#a、 #b{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
填充：10px；
溢出：自动；
}
#a{
宽度：80px；
背景：#f00；
}
#b{
背景：#00f；
左：80px；
宽度：100%；
}
功能pdcb（e）{
e、 预防默认值（）；
}
功能npcb（e）{
e、 停止传播（）；
}
$（文档）.on（'touchstart touchmove'，pdcb）。
打开（'touchstart touchmove'，'.scrollable'，npcb）；
这

应该

是

可滚动

但是

不

滚动



整个

页面

这

应该

是

可滚动

但是

不

滚动



整个

页面

这

应该

是

可滚动

但是

不

滚动



整个

页面

这

应该

是

可滚动

但是

不

滚动



整个

页面

这

应该

是

可滚动

但是

不

滚动



整个

页面

这永远不应该滚动

解决方案：

$(document).on('touchmove', function(e) {
    e.preventDefault();
}).ready(function() {
    $(".scrollable").on('touchstart', function(e) {
        this.allowUp = (this.scrollTop > 0);
        this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
        this.prevTop = null;
        this.prevBot = null;
        this.lastY = e.originalEvent.pageY;
    }).on('touchmove', function(e) {
        var event = e.originalEvent;
        var up = (event.pageY > this.lastY), down = !up;
        this.lastY = event.pageY;

        if ((up && this.allowUp) || (down && this.allowDown))
            event.stopPropagation();
        else
            event.preventDefault();
    });
});

$（文档）.on（'touchmove'，函数（e）{
e、 预防默认值（）；
}).ready（函数（）{
$（“.scrollable”）.on（'touchstart'，函数（e）{
this.allowUp=（this.scrollTop>0）；
this.allowDown=（this.scrollTopthis.lastY），down=！up；
this.lastY=event.pageY；
if（（向上和此.allowUp）| |（向下和此.allowDown））
event.stopPropagation（）；
其他的
event.preventDefault（）；
});
});

当您没有触及div内容的边缘时，您需要允许本地touchmove事件在该元素上工作（这样它就可以滚动），但您需要阻止事件在DOM中冒泡，这样它就不会触发页面主体上的滚动
当您到达元素的边界时，您需要完全阻止本机动量滚动
我使用的代码如下（向原作者致歉，这是根据我过去在互联网上找到的关于这个主题的教程改编的……但现在似乎找不到URL）：
其中elem是您的DOM节点

elem.addEventListener（'touchstart'，函数（事件）{ this.allowUp=（this.scrollTop>0）； this.allowDown=（this.scrollTopthis.lastY），down=！up； this.lastY=event.pageY； if（（向上和&this.allowUp）|（向下和&this.allowDown））event.stopPropagation（）； else事件。preventDefault（）； });
我通常定义一个元素数组并循环遍历它们——将此代码迭代地应用于每个元素

祝你好运，希望这能有所帮助。
最初的答案非常棒，但我解决了一些缺陷：

如果元素位于顶部或底部，则不会分别向上和向下滚动

如果元素是动态添加的，它将没有滚动处理程序

存在未使用的变量（prevTop、prevBot）

我的答复涉及这些问题。（请注意，我使用的是
.scroll-y
，而不是
.scrollable
）
首先，添加以下CSS规则：

.scroll-y { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* nice webkit native scroll */ }
将
.scroll-y
类添加到要滚动的任何元素中
然后，将此JS添加到某个位置：

// Disable scroll for the document, we'll handle it ourselves $(document).on('touchmove', function(e) { e.preventDefault(); }); // Check if we should allow scrolling up or down $(document.body).on("touchstart", ".scroll-y", function (e) { // If the element is scrollable (content overflows), then... if (this.scrollHeight !== this.clientHeight) { // If we're at the top, scroll down one pixel to allow scrolling up if (this.scrollTop === 0) { this.scrollTop = 1; } // If we're at the bottom, scroll up one pixel to allow scrolling down if (this.scrollTop === this.scrollHeight - this.clientHeight) { this.scrollTop = this.scrollHeight - this.clientHeight - 1; } } // Check if we can scroll this.allowUp = this.scrollTop > 0; this.allowDown = this.scrollTop < (this.scrollHeight - this.clientHeight); this.lastY = e.originalEvent.pageY; }); $(document.body).on('touchmove', ".scroll-y", function(e) { var event = e.originalEvent; var up = event.pageY > this.lastY; var down = !up; this.lastY = event.pageY; if ((up && this.allowUp) || (down && this.allowDown)) { event.stopPropagation(); } else { event.preventDefault(); } });

//禁用文档滚动，我们自己处理 $（文档）.on（'touchmove'，函数（e）{ e、预防默认值（）； }); //检查是否允许向上或向下滚动 $（document.body）.on（“touchstart”，“.scroll-y”，函数（e）{ //如果元素可滚动（内容溢出），则。。。 if（this.scrollHeight！==this.clientHeight）{ //如果我们在顶部，向下滚动一个像素以允许向上滚动 if（this.scrollTop==0）{ this.scrollTop=1； } //如果我们在底部，向上滚动一个像素以允许向下滚动 if（this.scrollTop==this.scrollHeight-this.clientHeight）{ this.scrollTop=this.scrollHeight-this.clientHeight-1； } } //检查我们是否可以滚动 this.allowUp=this.scrollTop>0； this.allowDown=this.scrollTop<（this.scrollHeight-this.clientHeight）； this.lastY=e.originalEvent.pageY； }); $（document.body）.on（'touchmove'，.scroll-y'，函数（e）{ var事件=原始事件； var up=event.pageY>this.lastY； var向下=！向上； this.lastY=event.pageY； if（（向上和此.allowUp）| |（向下和此.allowDown））{ event.stopPropagation（）； }否则{ event.preventDefault（）； } });
艾伦·格雷提供的说明很有帮助
硒
// Disable scroll for the document, we'll handle it ourselves $(document).on('touchmove', function(e) { e.preventDefault(); }); // Check if we should allow scrolling up or down $(document.body).on("touchstart", ".scroll-y", function (e) { // If the element is scrollable (content overflows), then... if (this.scrollHeight !== this.clientHeight) { // If we're at the top, scroll down one pixel to allow scrolling up if (this.scrollTop === 0) { this.scrollTop = 1; } // If we're at the bottom, scroll up one pixel to allow scrolling down if (this.scrollTop === this.scrollHeight - this.clientHeight) { this.scrollTop = this.scrollHeight - this.clientHeight - 1; } } // Check if we can scroll this.allowUp = this.scrollTop > 0; this.allowDown = this.scrollTop < (this.scrollHeight - this.clientHeight); this.lastY = e.originalEvent.pageY; }); $(document.body).on('touchmove', ".scroll-y", function(e) { var event = e.originalEvent; var up = event.pageY > this.lastY; var down = !up; this.lastY = event.pageY; if ((up && this.allowUp) || (down && this.allowDown)) { event.stopPropagation(); } else { event.preventDefault(); } });

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .page{ font-size: 24px; overflow: scroll; } .menu{ position: fixed; top: 0; bottom: 0; left: 0; width: 80%; background: gray; z-index: 1; font-size: 10px; overflow: scroll; /* uncomment to get smooth momentum scroll, but also a rubber band effect */ /*-webkit-overflow-scrolling: touch;*/ } .menu-item{ padding: 10px; background: darkgray; font-size: 24px; } </style> </head> <body> <div class="menu scrollable"> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> </div> <div class="page disable-scrolling"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <script> document.ontouchmove = function ( event ) { var isTouchMoveAllowed = true, target = event.target; while ( target !== null ) { if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) { isTouchMoveAllowed = false; break; } target = target.parentNode; } if ( !isTouchMoveAllowed ) { event.preventDefault(); } }; function removeIOSRubberEffect( element ) { element.addEventListener( "touchstart", function () { var top = element.scrollTop, totalScroll = element.scrollHeight, currentScroll = top + element.offsetHeight; if ( top === 0 ) { element.scrollTop = 1; } else if ( currentScroll === totalScroll ) { element.scrollTop = top - 1; } } ); } removeIOSRubberEffect( document.querySelector( ".scrollable" ) ); </script> </body> </html>