0

I have a fixed element which covers the entire screen and need scrolling.

IOS has what people call 'rubbing banding' for an example of this behavior you can take a look at these gifs:

http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/

The problem is that when rubber banding occurs and pulls my fixed element down(revealing the content it overlays) there is a chance a users finger might end up on the content which is being overlay-ed.

When this happens all touchmove event will trigger not on my fixed element that covers the screen but on the body that my fixed element is overlaying.

I know you can prevent the body from scrolling in a maner like this:

body.noscroll{
    position:fixed;
    overflow:hidden;
}

But this is a solution to prevent scrolling.

This is not the solution because once the touchmove event has triggered on the overlay-ed content once, it will only stop if a user removes their finger from the screen.

In short a user might scroll my fixed element, reach the top making the rubber banding kick in and swipe on the body instead of the fixed element because the rubber banding reveals the body.

Even if the element pops back into place after the rubber banding has taken place the touchmove event is still stuck on the body element until the user removes his finger from the screen.

I am pretty lost on what to do here. Somehow disabling the touchmove event for the body seems like a good idea but my fixed element is inside there and it still needs scroll abilities.

Any thoughts or tips on how to handle this?

Edit:

A simply jsfiddle:

https://jsfiddle.net/pq88zLLx/1/

This only works on IOS though and only if you swipe into the content that the rubber banding is revealing.

4

1 回答 1

0

对于在移动浏览器上处理内部滚动的固定元素，确实没有一个好的解决方案。

除了 Safari，我还没有测试过其他浏览器，但我了解到其他浏览器也不太喜欢这种组合。

最好和最灵活的解决方案是让您的full screen元素absolute定位。这将解决滑动和定位的常见问题。

但是如果我的元素在relative容器中怎么办？

然后你运气不好，需要抓住你的元素，将其从 dom 中移除，并在打开元素时将其放在 dom 中尽可能高的位置fullscreen。

之后，您需要将元素放回原来的位置。我所知道的最好的方法是留下一个占位符供您附加/前置。dom 没有任何方法可以为您提供元素的确切位置，因此如果您不希望更改元素的顺序，则必须这样做。

如果您觉得可以进行改进，请随时对此答案发表评论或建议。

于 2017-07-24T07:33:39.180 回答