禁用移动网页上的水平滚动-Java 学习之路

我有一个这个简单的移动网页，我正在尝试 Build 一个像侧面菜单按钮的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>

4 回答

0
我把你的代码放在一个小提琴中，但是我无法将'meta标记'放到头部，因此很难在我的手机上进行测试 . http://jsfiddle.net/Pevara/Ku5nY/1/show/

似乎在桌面上工作正常，没有滚动条 .

我确实在你的css中添加了以下内容：
```
body{
  overflow-x:hidden;
  font-family: sans-serif;   
  /* added: */
  max-width: 100%; 
  height: 100%;
}
```
不确定它是否会有所作为，但值得一试......
回复于 2024-05-14T08:04:53+08:00

大卫 .

你试过这个用过：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
    });
}

回复于 2024-05-14T08:04:53+08:00

0

我有一个类似的问题，我在我的内容背后有菜单，并将我的内容推到左边，以显示隐藏在后面的Facebook样式菜单 .

我正在应用“绝对”定位模仿幻灯片并将内容从文档流中取出 . 在隐藏溢出的情况下，您似乎可以通过触摸拉出内容层（这听起来与您遇到的问题相同） . 即使有溢出标准，x和y几乎都会出现这种情况 . 这也是宽度：身体100％等

当我滑过内容层然后将内容的高度（当菜单打开时）降低到窗口高度时，将内容层更改为“相对”似乎对我有用，并且在设备上看起来相当稳健 .

祝你好运，这对任何遇到类似问题的人都有帮助 .

谢谢，戴夫

回复于 2024-05-14T08:04:53+08:00
0
这是一个快速的 . 事情是，只有你定义模态的高度才有效 . 如果没有定义高度，它将无法工作 . 将对话框设置为高度100％并溢出隐藏 . 然后将内容设置为position：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;">
```
回复于 2024-05-14T08:04:53+08:00

禁用移动网页上的水平滚动

4 回答

相关问题