我有一个响应式网站，并为手机构建了一个类似于 Facebook 的 slider 。所以我做了一个非常简单的设置，到目前为止效果非常好。我将所有内容都放在一个充满整个 body 的 .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 结构如下:
<body>
<div class=".outer_wrapper">
<!-- all the lovely content is here -->
</div>
<div class="slider">
<!-- some menu items here -->
</div>
</body>
有什么建议吗？
最佳答案
我的建议是将 .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’);
});
希望这对您有所帮助？
关于jquery - 在移动设备上滚动内容溢出的固定 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26703055/