通過手指滑動禁用水平滾動

Question

這可能只是一個mac問題，但我有一個網頁的大小是頁面大小的兩倍，並且動態地移動到視圖中。 在我的CSS我有溢出-x：隱藏設置，以便這個元素不會創建一個醜陋的底部scollbar，問題是在我的筆記本電腦（可能在ipad公司和其他設備），我可以用兩根手指只需滑動滾動並查看此內容。這打破了整個佈局，看起來真的很糟糕，我正在尋找一種方法來完全禁用這個水平滾動動作與JavaScript或CSS。

謝謝

Answer 1

的JavaScript：

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

這將返回滾動條返回到它的原始（0,0）的位置，每當用戶試圖滾動。讓我知道這是否適用於筆記本電腦，因爲我在桌面上。

Answer 2

首先我使用了一個函數來檢查滾動停止的時間。然後我用另一個功能回到中心。

(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()); 
});