IOS Safari和javascript:如何无缝地打开/关闭onscroll/ontouchmove(使用一个连续的

Question

我在IOS Safari上的自定义滚动行为被困住了。滚动行为的实现基本上分为原生onscroll处理程序和自己的ontouchmove处理程序，用于修改div元素的绝对位置:

    function disableNativeScroll(element) {
       // customized scrolling
       element.ontouchmove = function customHandler(e) { 
           e = e || window.event;
           if (e.preventDefault) e.preventDefault();
           e.returnValue = false;
           // do something smart here ...
       }        
    }
    function enableNativeScroll(element) {
       // native scrolling until top offset is 0
       element.onscroll = function(e) {
           if (element.scrollTop === 0) {
              disableNativeScroll(element);
           }
           return true;
       }
    }

因此，例如，当在本机模式下滚动时，在给定的偏移量处调用禁用它的函数，并且自定义处理程序附加到'ontouchmove'事件。

在浏览器内部(Firefox, Safari, Chrome)，切换工作顺利。在Android (Chrome)上，使用触摸的滚动也不会中断。在IOS Safari中，滚动在"断点"处停止，只有在我中断触摸手势然后恢复时才继续。

请查看演示!如果背景部分为绿色，则禁用本机滚动，并检测可选事件(touchmove, mousewheel, wheel)来移动内容。而完整的红色背景则表示本机onscroll处理程序接管滚动行为。

演示:http://crishushu.bplaced.net/stackoverflow/32160289

小提琴:https://jsfiddle.net/o16zcbrk/9/

Answer 1

HTML示例

<div id="elm" class="no-scroll">...</div>

CSS禁用滚动

.no-scroll
{
   overflow: hidden;
}

JS操纵滚动

$('#elm').prop('scrollTop', new_scroll_value);
$('#elm').prop('scrollLeft', new_scroll_value);

要恢复滚动，只需删除"no-scroll"类