Question

我有一个快速响应的网站，并为手机构建了一个类似Facebook的滑块。所以我做了一个非常简单的设置，到目前为止工作非常整洁。我的所有内容都在.outer_wrapper中，这些内容充满了整个身体。在这个包装器下面是一个带有以下CSS的.slider div：

.slider {
   position: fixed;
   height: 100%;
   right: 0;
   top: 0;
   width: 250px;
}

当我按下触发器时，它会将.outer_wrapper向左移动，并显示.slider。

$('.hamburger-menu').click(function() { 
   $('.outer_wrapper').animate({marginLeft: '-250px', marginRight: '-250px'}, 'slow');
});

问题是，.slider内容溢出，但在手机上它拒绝滚动。它总是滚动.outer_wrapper的内容。我尝试了-webkit-overflow-scrolling:touch;和overflow-y: scroll;。

修改：忘记提及.slider不是.outer_wrapper的孩子。所以我的身体正在遵循结构：

<body>
  <div class=".outer_wrapper">
    <!-- all the lovely content is here -->
  </div>
  <div class="slider">
    <!-- some menu items here -->
  </div>
</body>

有什么建议吗？

Answer 1

我建议的是.slider位于.outer_wrapper之外。然后通过切换他们的类并使用css变换为它们设置动画。这样，当用户向下滑动页面时，它们不会相互冲突。

试试这个

 .slider {
    position:fixed;
    height:100%;
    width:250px;
    top:0;
    left:0;

    -webkit-transform:translate(-250px,0px);
    transform:translate(-250px,0px);

    -webkit-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
 }

 .slider.reveal {
      -webkit-transform:translate(0px,0px);
      transform:translate(0px,0px);
 }


 .outer_wrapper {
    margin:0;
    width:100%;
    height:100%;
    position:relative;
    -webkit-transform:translate(0px,0px);
    transform:translate(0px,0px);

    -webkit-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
 }


 .outer_wrapper.hide {
      -webkit-transform:translate(250px,0px);
      transform:translate(250px,0px);
 }

并且对于Jquery，使用toggleClass函数，如下所示：

 $('.hamburger-menu').click(function() { 
      $('.outer_wrapper’).toggleClass(‘hide’);
      $(‘.slider’).toggleClass(‘reveal’);
 });

希望有帮助吗？

Answer 2

好的家伙稍微更新了一下。我发现问题来自我使用Skrollr名称的插件。停用时：

overflow-y: scroll;

或

overflow: scroll;
overflow-x: hidden;

工作得很好。为了使Webkit设备更顺畅，以下工作非常棒

-webkit-overflow-scrolling: touch;

给定的案例会改变整个问题，这就是我将此标记为答案的原因。

在移动设备上滚动带有溢出内容的固定div

2 个答案: