我正在制作弹出的侧边导航并且工作正常，但问题是当该 Pane 出现时(使用 translate3d)，当使用 iPhone 或 Chrome 中的仿真模式滚动时，它将滚动 <body>在它的后面，好像我的手指穿过了一层。
在移动宽度的桌面浏览器上，它完全按预期工作。出现导航，滚动锁定到导航 Pane ，背景元素不滚动。
我觉得这可能是由于 translate3d以及它如何与 z-index 交互？但这是一个缺乏根据的猜测。
这是我正在使用的:
.side-nav--fixed {
position: fixed;
width: 230px;
@include media-query(palm) {
width: 100% !important;
position: fixed !important;
top: 125px; right: 0; bottom: 0; left: 0;
z-index: 5555;
background-color: #fff;
overflow-y: scroll;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
@include transform(translate3d(-100%, 0, 0));
@include single-transition(transform 1s ease-out);
@extend %ui-shadow;
&::-webkit-scrollbar {
display: none;
}
&.animate {
@include transform(translate3d(0%, 0, 0));
@include single-transition(transform 1s ease-out);
}
}
}
.no-scroll {
position: fixed;
}
$('body').on('click', '.js-side-nav-toggle', function(ev) {
$('html, body').toggleClass('no-scroll');
});
快速总结一下:我使用 translate3d 引入了一个层，然后我想将滚动和 ontouchmove 事件限制在该层，并忽略它后面的所有元素。
感谢您的宝贵时间。
编辑:
我设法通过添加 position: fixed; 来解决这个问题至 .no-scroll适用于 html和 body单击菜单切换时。我用工作代码更新了上面的代码。
最佳答案
我设法通过添加 position: fixed 来解决这个问题； .no-scroll 在单击菜单切换时应用于 html 和正文。我用工作代码更新了上面的代码。
.side-nav--fixed {
position: fixed;
width: 230px;
@include media-query(palm) {
width: 100% !important;
position: fixed !important;
top: 125px; right: 0; bottom: 0; left: 0;
z-index: 5555;
background-color: #fff;
overflow-y: scroll;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
@include transform(translate3d(-100%, 0, 0));
@include single-transition(transform 1s ease-out);
@extend %ui-shadow;
&::-webkit-scrollbar {
display: none;
}
&.animate {
@include transform(translate3d(0%, 0, 0));
@include single-transition(transform 1s ease-out);
}
}
}
.no-scroll {
position: fixed;
}
$('body').on('click', '.js-side-nav-toggle', function(ev) {
$('html, body').toggleClass('no-scroll');
});
关于css - 在触摸设备上禁用后面层的滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24985632/