我正在制作一个弹出并且工作正常的侧面导航，但问题是当该窗格出现(使用 translate3d(时，当使用 iPhone 滚动或在 Chrome 中的仿真模式时，它会滚动它后面的<body>，就好像我的手指按过图层一样。
在移动宽度的桌面浏览器上，它完全按预期工作。此时将显示导航，滚动锁定到导航窗格，并且背景元素未滚动。
我觉得这可能是由于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 事件限制在该图层上，并忽略它背后的所有元素。
谢谢你的时间。
编辑：
我设法通过在单击菜单切换时向.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');
});