禁用手指滑动的水平滚动

disable horizontal scrolling by finger swipe

本文关键字：水平 滚动 手指      更新时间：2023-09-26
这可能

只是一个 mac 问题，但我有一个页面的元素是页面大小的两倍，并且会动态移动到视图中。在我的 css 中，我设置了 overflow-x：hidden 设置，以便此元素不会创建一个丑陋的底部 scollbar，问题出在我的笔记本电脑上（可能在 iPad 和其他设备上），我可以用两根手指滑动即可滚动并查看此内容。这破坏了整个布局并且看起来非常糟糕，我正在寻找一种方法来使用 javascript 或 css 完全禁用此水平滚动操作。

谢谢

JavaScript： 

 window.onscroll = function () {
     window.scrollTo(0,0);
    }

每当用户尝试滚动时，这会将滚动条返回到其原始 （0,0） 位置。让我知道这是否适用于笔记本电脑垫，因为我在台式机上。

首先，我使用一个函数来检查滚动何时停止。 然后我使用另一个函数移回中心。

(function(){
var special = jQuery.event.special,
    uid1 = 'D' + (+new Date()),
    uid2 = 'D' + (+new Date() + 1);
special.scrollstart = {
    setup: function() {
        var timer,
            handler =  function(evt) {
                var _self = this,
                    _args = arguments;
                if (timer) {
                    clearTimeout(timer);
                } else {
                    evt.type = 'scrollstart';
                    jQuery.event.handle.apply(_self, _args);
                }
                timer = setTimeout( function(){
                    timer = null;
                }, special.scrollstop.latency);
            };
        jQuery(this).bind('scroll', handler).data(uid1, handler);
    },
    teardown: function(){
        jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
    }
};
special.scrollstop = {
    latency: 300,
    setup: function() {
        var timer,
                handler = function(evt) {
                var _self = this,
                    _args = arguments;
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout( function(){
                    timer = null;
                    evt.type = 'scrollstop';
                    jQuery.event.handle.apply(_self, _args);
                }, special.scrollstop.latency);
            };
        jQuery(this).bind('scroll', handler).data(uid2, handler);
    },
    teardown: function() {
        jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
    }
};
})();
jQuery(window).bind('scrollstop', function(e){
  // block horizontal scrolling
  window.scrollTo(0,jQuery(window).scrollTop()); 
});
相关文章：