防止身体元素在触摸设备上滚动 [英] Prevent Body Element From Scrolling On Touch Devices

问题描述

问题：

我在iOS主屏幕上有一个网络应用程序，因此没有浏览器窗口，它的外观和功能都很好。我已经想出如何使内部div元素做触摸滚动事件并在iOS中使用动量/反弹风格，并且完美地运行...我现在遇到的问题是反弹滚动（再次，仅限iOS） ）弄乱了我在页面上的任何固定元素或与网站相关的动画。

I have a web application on the iOS homescreen so there is no browser window and it looks and functions very well. I've figured out how to make inner div elements do the touch scrolling events and use the momentum/bounce style in iOS, and that works perfectly... the issue I run into now is that the bounce scrolling (again, iOS-only) is messing up any fixed elements or site-related animations I have on the page.

当我尝试以下操作时：

document.ontouchmove = function(e) {e.preventDefault()};

问题停止，但现在我无法在我的任何地方滚动 申请。

The issue stops, but now I can't scroll anywhere on my application.

我需要什么：

我希望身体完全锁定到位...如果有人抓住我的侧边栏或导航栏，然后拉上页面，身体会反弹！但如果有人在内容区域内，则根本没有问题 - 应用程序滚动完美且看起来很棒。如果我停止在侧边栏或导航栏或正文上滚动，则应用程序中的所有滚动都将无法正常工作，并且基本上不起作用。

I want the body to be completely locked in place... If someone grabs, say, my sidebar or navbar and then pulls on the page, the body bounces! But if someone is inside the content area, there is no issue at all--the application scrolls flawlessly and looks great. If I stop scrolling on the sidebar or navbar or body, all scrolling in the application will not working and is essentially nonfunctional.

tl; dr：身体反弹滚动。我想要一个滚动的内容区域，而不是其他地方的滚动。身体应该永远不会移动，但我认为在身体内可以滚动的元素应该。

作为旁注，我浏览了以下热门问题/解决方案（等等）：

1
2
3

我只是想在人们假设我没有做任何搜索之前发布这个...我已经在这里工作了好几个小时了看到比上面发布的更多解决方案，但我想获得上面列出的最受欢迎的解决方案，所以没有人认为这是一个重复的问题。

推荐答案

几天前我想出了这个，并设置了这个方便的jsbin最重要的是展示我做了什么工作：

I figured this out a few days ago and have this handy jsbin set up to demonstrate what I did to make this work:

我的使用jsbin示例

在iPad上打开此链接时，文本应该是可滚动的。当目前没有当前正在运行的touchmove事件时，请尝试拉动屏幕的其余部分。

When you open this link on an iPad, the text should be scrollable. Try tugging around the rest of the screen when there is no current touchmove event currently working.

如果你玩它，你会注意到只有内部文本域移动正如所料。这是通过在 .container 类中放入我的 .scrollable 类来确定的。 .scrollable 类占用其父容器的完整高度。

If you play around with it, you'll notice that only the inner textfield moves as expected. This is determined by putting my .scrollable class within the .container class. The .scrollable class takes up the full height of it's parent container.

现在使容器的高度更大，喜欢身高：500px 。这里的目标是使它足够大，没有溢出，但又小到足以在iPad上有其他空白。尝试滚动它或拉动它...没有触摸移动事件被触发并且屏幕保持不动。

Now make the container a larger height, like height: 500px. The goal here is to make it large enough to have no overflow yet small enough to have other whitespace on the iPad still. Try scrolling it or pulling it... No touchmove events are fired and the screen stays in place.

我的JS确定一个物体在被触摸后是否有溢出。如果是，则滚动。如果没有，它不会发送滚动事件。

My JS determines if an object has overflow after being touched. If it does, it scrolls. If it does not, it does not send a scroll event.

使用它并让我知道我是否可以提供任何更好的示例，如果您遇到任何错误...现在唯一一个我知道的是，如果你真的试图打破它并开始在当前触摸移动事件被触发的时候拉扯网站，或者页面首次加载......我不会指望那些作为错误，但如果你也可以找到那些修复，我全都听见了！

Play with it and let me know if I can provide any better examples and also if you run into any bugs... Right now the only one I know of is if you're really trying to break it and start tugging around the site while a current touchmove event is being fired, or the page is first loading... I wouldn't count those as "bugs", but if you can find a fix for those too, I'm all ears!

这篇关于防止身体元素在触摸设备上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！