防止全页滚动iOS [英] prevent full page scrolling iOS
问题描述
在Mobile Safari下，可以允许一个绝对定位的 div 滚动，而不会让整个页面在滚动到达边缘时弹起
这是我遇到的问题的最小工作示例：
<！doctype HTML>
< html>
< head>
< meta charset =utf-8/>
< meta name =viewportcontent =width = device-width，minimum-scale = 1.0，maximum-scale = 1.0，user-scalable = no>
< meta name =apple-mobile-web-app-capablecontent =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 =aclass =scrollable>
此< br>
应< br>
be< br>
可滚动< br>
，但< br>
不< br>
scroll< br>
< br>
整个< br>
页< br>
此< br>
应< br>
be< br>
可滚动< br>
，但< br>
不< br>
scroll< br>
< br>
整个< br>
页< br>
此< br>
应< br>
be< br>
可滚动< br>
，但< br>
不< br>
scroll< br>
< br>
整个< br>
页< br>
此< br>
应< br>
be< br>
可滚动< br>
，但< br>
不< br>
scroll< br>
< br>
整个< br>
页< br>
此< br>
应< br>
be< br>
可滚动< br>
，但< br>
不< br>
scroll< br>
< br>
整个< br>
页< br>
< / div>
< div id =b>
这不应该滚动
< / div>
< / body>
< / html>
解决方案： / p>
$（document）.on（'touchmove'，function（e）{
e.preventDefault b $ b}）。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;
.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（（&& this.allowUp）||（down&& ; this.allowDown））
event.stopPropagation（）;
else
event.preventDefault（）;
}）;
}）;
内容，您需要允许原生touchmove事件在该元素上工作（因此可以滚动），但您要停止事件，使其不能触发DOM，以便不触发滚动网页正文。
当您点击元素的边界时，您需要完全阻止本地动量滚动。
我使用的代码如下（对原作者道歉，这是从关于这个话题的一个教程改编的我在互联网上的某个地方过去...不能似乎
elem.addEventListener（'touchstart'，function（event）{
this.allowUp =（this.scrollTop> 0） ;
this.allowDown =（this.scrollTop< this.scrollHeight - this.clientHeight）;
this.prevTop = null; this.prevBot = null;
this.lastY = event。 pageY;
}）;
elem.addEventListener（'touchmove'，function（event）{
var up =（event.pageY> this.lastY），down =！up;
this。 lastY = event.pageY;
if（（&& this.allowUp）||（down&& this.allowDown））event.stopPropagation（）;
else event.preventDefault（）;
}）;
我通常定义一个元素数组并循环遍历 - 每次迭代使用这个代码。 / p>
最好的运气，希望这有助。
Under Mobile Safari, is it possible to allow one absolutely positioned div to scroll without allowing the entire page to bob up and down when it the scroll reaches the edges (elastically scrolling)?
Here is a minimal working example of the issue I'm facing:
<!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>
Solution:
$(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();
});
});
While you're not hitting the edges of your div's content, you need to allow the native touchmove event to work on that element (so it can scroll), but you're going to want to stop the event from bubbling up the DOM so that it doesn't trigger scrolling on the page body.
When you hit the boundary of your element, you need to prevent the native momentum scrolling entirely.
The code I use for this is as follows (apologies to the original author, this is adapted from a tutorial on this topic I found somewhere on the internet in the past... Can't seem to find the URL now though):
where elem is your DOM node
elem.addEventListener('touchstart', function(event){
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.prevTop = null; this.prevBot = null;
this.lastY = event.pageY;
});
elem.addEventListener('touchmove', function(event){
var up = (event.pageY > this.lastY), down = !up;
this.lastY = event.pageY;
if ((up && this.allowUp) || (down && this.allowDown)) event.stopPropagation();
else event.preventDefault();
});
I usually define an array of elements and loop through them - applying this code to each one iteratively.
Best of luck, hope this helps.
这篇关于防止全页滚动iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
