Javascript 通过手指滑动禁用水平滚动

Javascript 通过手指滑动禁用水平滚动,javascript,css,horizontal-scrolling,Javascript,Css,Horizontal Scrolling,这可能只是mac的问题,但我有一个页面,其中的元素是页面大小的两倍,并动态移动到视图中在我的css中,我设置了overflow-x:hidden以便该元素不会创建一个丑陋的底部scollbar,问题是在我的笔记本电脑上(可能在iPad和其他设备上),我可以用两个手指滑动以滚动和查看此内容。这破坏了整个布局,看起来非常糟糕,我正在寻找一种方法,用javascript或css完全禁用这种水平滚动动作。 谢谢你JavaScript: window.onscroll = function () {

这可能只是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()); 
});

是否可以使用此选项仅禁用水平滚动?我想允许垂直滚动。这不起作用。它将屏幕锁定到位并防止所有滚动。此外,即使您将其更改为:window.scrollTo(0,jQuery(window.scrollTop());垂直滚动受到严重阻碍。试试下面我的解决方案。