html禁止弹性效果,javascript - 禁用仅用于html的弹性滚动，但维护具有溢出的元素：滚动 - 堆栈内存溢出...

这是ThinkingStiff的类似答案，除了它不强制你的html结构。 它查找已溢出内容的任何元素，并仅在用户与它们交互时才启用滚动。

缺点：

一旦用户点击可滚动节点的顶部或底部限制，就不会发生在该节点内的弹跳(但如果您从限制下方/上方轻弹，它将会发生)。 这可能意味着它不能满足你对刷新的要求:(

在计算滚动偏移时，我在测试用例中注意到了一个奇怪的2px差异。 不确定它来自何处，您可能需要调整该值

CoffeeScript的：

# Vertical scrolling behavior overrides.

#

# This disables vertical scrolling on the page for touch devices, unless the user is scrolling

# within an overflowed node. This requires some finessing of the touch events.

#

# **NOTE:** This code ends up disabling bounce behavior if the user tries to scroll on a node that

# is already at its upper or lower limit.

window$ = $(window)

initialY = null

nodeStack = []

# When a user begins a (potential) drag, we jot down positional and node information.

#

# The assumption is that page content isn't going to move for the duration of the drag, and that

# it would also be awkward if the drag were to change/stop part way through due to DOM

# modifications.

window$.bind 'touchstart', (evt) ->

initialY = evt.originalEvent.pageY

nodeStack = $(evt.target).parents().andSelf().filter(':not(body, html)').get().reverse()

nodeStack = nodeStack.map (node) -> $(node)

window$.bind 'touchend touchcancel', (evt) ->

initialY = null

nodeStack = []

# We override the `touchmove` event so that we only allow scrolls in allowable directions,

# depending on where the user first began the drag.

window$.bind 'touchmove', (evt) ->

return evt.preventDefault() if initialY == null

# A positive direction indicates that the user is dragging their finger down, thus wanting the

# content to scroll up.

direction = evt.originalEvent.pageY - initialY

for node$ in nodeStack

nodeHeight = node$.height()

# For some reason, the node's scrollHeight is off by 2 pixels in all cases. This may require

# tweaking depending on your DOM. Concerning.

scrollHeight = node$[0].scrollHeight - 2

nodeScrollTop = node$.scrollTop()

# If we have a scrollable element, we want to only allow drags under certain circumstances:

if scrollHeight > nodeHeight

# * The user is dragging the content up, and the element is already scrolled down a bit.

return if direction > 0 and nodeScrollTop > 0

# * And the reverse: the user is dragging the content down, and the element is up a bit.

return if direction < 0 and nodeScrollTop < scrollHeight - nodeHeight

# Otherwise, the default behavior is to disable dragging.

evt.preventDefault()