在手机上滚动固定div满满的内容

我有一个响应式网站，并为手机构建了一个类似Facebook的滑块。所以我做了一个非常简单的设置，目前工作非常简洁。我的所有内容都在填充整个身体的.outer_wrapper中。在这种包装是一个.slider DIV与下面的CSS：在手机上滚动固定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>

有什么建议吗？

来源

2014-11-02 supersize

这是手机用户界面吗？ – 2014-11-02 23:22:17

@MatildaYiPan是的！ – supersize 2014-11-03 09:19:57

好吧，大家稍微更新一下。我发现这个问题来自我使用的名字为Skrollr的插件。当停用它：

overflow-y: scroll;

或

overflow: scroll; 
overflow-x: hidden;

的作品就好了。为了能让它更顺畅Webkit的设备下面做的真棒工作

-webkit-overflow-scrolling: touch;

给定的情况下，改变了整个问题，这就是为什么我会纪念这个作为回答。

来源

2014-11-04 12:47:52 supersize

我会建议的是，将.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’); 
});

希望帮助？

来源

2014-11-03 12:08:27

我真的很感谢你的帮助。不幸的是我应该提到'.slider'不是'.outer_wrapper'的子节点。我基本上做了你的建议，但使用jQuery动画。 – supersize 2014-11-03 14:51:12

好的，对不起。奇怪的是，这在过去非常稳定。如果在外包装上添加取消激活滚动，点击汉堡菜单时会发生什么情况？即 overflow-y：hidden; 并确保菜单滑块的z-index大于外层包装。 – 2014-11-03 15:00:33

包装上的'overflow-y：hidden;'的好主意。请立即尝试一下。我有'z-index'，这个问题不是来自这个！ – supersize 2014-11-03 19:29:52

在手机上滚动固定div满满的内容

回答

相关问题