ʞɔı*_*ɔıu 7 javascript jquery webkit mobile-safari cordova
iOS 5现在允许本机溢出:滚动支持.
我想要做的是禁用touchmove除了具有'scrollable'类或其子元素的元素之外的所有事件.
但我似乎无法让它发挥作用; 这就是我在下面的工作:
<html>
<head>
<style>
.scrollable {
height: 5em;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// doesn't seem to work
var handleMove = function (e) {
if (!$(e.target).parents().andSelf().hasClass('scrollable')) {
e.preventDefault();
}
};
document.addEventListener('touchmove', handleMove, true);
</script>
</head>
<body>
<div>
don't scroll if you drag here
</div>
<div class='scrollable'>
should be scrollable if you drag here
<ul>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
</ul>
</div>
don't scroll if you drag here
</body>
</html>
Sco*_*ott 15
我知道你问了这个问题已经有一段时间了,但我有同样的问题,我用你的代码作为解决问题的基础.所以感谢你的灵感.
(Javascript + jQuery)
<script>
var handleMove = function (e) {
var scrollable = false;
var items = $(e.target).parents();
$(items).each(function(i,o) {
if($(o).hasClass("scrollable")) {
scrollable = true;
}
});
if(!scrollable)
e.preventDefault();
};
document.addEventListener('touchmove', handleMove, true);
</script>
或者更简洁,但最终结果相同(信用J Griffiths):
<script>
var handleMove = function (e) {
if($(e.target).closest('.scrollable').length == 0) { e.preventDefault(); }
}
document.addEventListener('touchmove', handleMove, true);
</script>
您还应该包含以下META标记.
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no;" />
Nev*_*vir -1
这是一个（主要）有效的解决方案，用于禁用除溢出元素之外的所有元素的垂直滚动：
（咖啡脚本）：
# 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()
| 归档时间： |
|
| 查看次数： |
28824 次 |
| 最近记录： |