首页 文章

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

提问于
浏览 次
0

这可能只是一个mac问题，但我有一个页面，其元素是页面大小的两倍，并动态移动到视图中 . in my css I have overflow-x:hidden 设置，以便此元素不会创建一个丑陋的底部scollbar，问题出在我的笔记本电脑上（可能在ipads和其他设备上）我只需用两根手指滑动即可滚动并查看此内容 . 这打破了整个布局，看起来非常糟糕， I am looking for a way to completely disable this horizontal scrolling action with javascript or css.

谢谢

javascript css horizontal-scrolling

2 回答

  • 2

    JavaScript的：

    window.onscroll = function () {
     window.scrollTo(0,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()); 
});
    回复于

相关问题