禁用移動網頁上的水平滾動

我有這個簡單的移動網頁，我試圖建立一個類似Facebook的側邊菜單按鈕。我試圖用CSS overflow-x：hidden隱藏水平滾動，但它不起作用。這裏是我的代碼，任何幫助將不勝感激：禁用移動網頁上的水平滾動

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 



    <script> 
     $(document).ready(function(){      
      $("button").click(function(){ 

       var win = $("#right-side"); 
       var position = win.position(); 
       //alert("left: " + position.left + ", top: " + position.top); 

       if(position.left < 100) 
       { 
        $("#right-side").animate({left:'250px'}); 
       }else{ 
        $("#right-side").animate({left:'0px'}); 
       } 

      }); 
     }); 
    </script> 

    <style> 
     body{overflow-x: hidden;font-family: sans-serif;} 

     #right-side{ 
      background:#BFC7D8;; 
      left:0; 
      top:0; 
      height:100%; 
      width:100%; 
      position:absolute; 

     } 
     #left-menu 
     { 
      background:#323949; 
      left:0; 
      top:0; 
      height:100%; 
      width:250px; 
      position:absolute; 
     } 

     #navigation { font-size:20px; width:250px; padding-top:100px; } 
     #navigation ul { margin:0px; padding:0px; } 
     #navigation li { list-style: none; } 



     ul.top-level li > a { 
      display: block; 
      border-bottom: 1px solid rgba(0,0,0, 0.1); 
      border-top: 1px solid rgba(255, 255, 255, 0.1); 
      padding: 15px; 
      text-shadow: 0 1px 0 #000; 
      text-decoration: none; 
      color: #ccc; 
      text-indent: 20px; 
     } 

     #toolbar 
     { 
      width:100%; 
      height:50px; 
      background:#00F;  
     } 


    </style> 





<div id="left-menu"> 
    <div id="navigation"> 
    <ul class="top-level"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">FAQ</a></li> 
     <li><a href="#">News</a></li> 
    </ul> 
</div> 
</div> 




<div id="right-side"> 

    <div id="toolbar"> 
     <button>Menu</button> 
    </div> 

    <h1>This is a test</h1> 
</div>

來源

2013-06-20 David Bagdasarian

我已經把你的代碼的小提琴，但我不能在「縮放」元標記添加到頭上，因此很難測試我的電話。 http://jsfiddle.net/Pevara/Ku5nY/1/show/

似乎在桌面上工作正常，但沒有滾動條。

我並添加以下你的CSS：

如果

body{ 
    overflow-x:hidden; 
    font-family: sans-serif; 
    /* added: */ 
    max-width: 100%; 
    height: 100%; 
}

不知道它會有所作爲，但它是值得一試...

來源

2013-06-20 21:46:36 Pevara

嗨，彼得，感謝您的快速反應。我嘗試了你的小提琴鏈接，我仍然可以向右滾動。問題在於菜單打開時。我在Mac上，所以滾動條不會顯示在底部，但如果我嘗試用我的觸摸板滾動到右側，它會移動。 –

我認爲問題在於你將右側移動到右側，而不是將左側移動到右側，而是移動到頂部 – K20GH

大衛。

您是否嘗試過使用這樣的：http://mmenu.frebsite.nl/

或者，看看這個，看看你可以用它來調整你的代碼：

http://jsfiddle.net/tzDjA/

你會發現有3個功能：

$('#trigger').click(function() { 
    if ($('#popout').hasClass('hidden')) { 
     $('#popout').removeClass('hidden'); 
     showPopout(); 
    } 
    else { 
     $('#popout').addClass('hidden'); 
     hidePopout(); 
    } 
}); 

function showPopout() { 
    $('#popout').animate({ 
     left: 0 
    }, 'slow', function() { 
     $('#trigger span').html('Close'); //change the trigger text at end of animation 
    }); 
} 

function hidePopout() { 
    $('#popout').animate({ 
     left: -40 
    }, 'slow', function() { 
     $('#trigger span').html('Show'); //change the trigger text at end of animation 
    }); 
}

來源

2013-06-20 22:54:34 K20GH

我有一個類似的問題，我有我的內容後面的菜單，並推動我的內容向左揭示隱藏在後面的Facebook風格菜單。

我正在應用'絕對'定位來模仿幻燈片並將內容從文檔流中提取出來。當隱藏溢出時，您似乎可以通過觸摸來拉動內容層（這聽起來像您遇到的相同問題）。即使溢出性病，幾乎所有事情都會發生。這也是與寬度：身體等100％

當我滑過這個，然後減少內容的高度（而菜單打開時）到窗口高度似乎更改爲內容層'相對'爲我工作，似乎相當強大的設備。

祝你好運，這應該有助於任何遇到類似問題的人。

謝謝，戴夫

來源

2013-10-03 15:58:28

這裏有一個quicky。事情是它只在你定義你的模態的高度時才起作用。如果沒有定義高度，它將無法工作。將對話框設置爲隱藏高度100％&。然後設置內容的位置：absolute，top：0，bottom：0，left：0，right：0，margin：auto並定義高度（在下例中爲250px，表示登錄模式）。我知道這聽起來不合理 - 它可能是一個CSS故障，但：它的工作原理 - 跨瀏覽器&跨平臺（還沒有檢查iPhone）。

<div class="modal-dialog" style="height:100%;overflow:hidden"><div class="modal-content" style="position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;height:250px;">

來源

2015-01-19 02:04:04

禁用移動網頁上的水平滾動

回答

相關問題