禁用在触摸设备上滚动后面的图层 [英] Disable scrolling of behind layers on touch devices
问题描述
我正在做一个侧面导航，弹出并且工作正常，但问题是当窗格出现（使用translate3d），当使用iPhone或模拟模式在Chrome滚动时，它会滚动< body> 后面，就好像我的手指通过该层。
在移动宽度的桌面浏览器上，它完全按照预期工作。
我觉得这可能是由于 translate3d
z-index 进行交互？但这是一个教育不足的猜测。 以下是我正在使用的工具：
.side-nav --fixed {
position：fixed;
width：230px;
@include媒体查询（手掌）{
width：100％！important;
position：fixed！important;
top：125px; right：0; bottom：0;左：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单转换（transform 1s ease-out）;
@extend％ui-shadow;
& :: - webkit-scrollbar {
display：none;
}
& .animate {
@include transform（translate3d（0％，0，0））;
@include单转换（transform 1s ease-out）;
}
}
}
.no-scroll {
position：fixed;
}
$（'body'）。on（'click'，'.js-side-nav-toggle'，function
$（'html，body'）。toggleClass（'no-scroll'）;
}）;
要快速总结：我使用translate3d引入图层，然后想限制滚动和ontouchmove事件
感谢您的时间。
编辑：
我设法通过添加
position：fixed; 到 html 和正文的 .no-scroll >当单击菜单切换时。 我设法通过添加position：fixed来解决这个问题。到.no滚动，当点击菜单切换时，它被应用到html和body。我用工作代码更新了上面的代码。
.side-nav - fixed {
position：fixed;
width：230px;
@include媒体查询（手掌）{
width：100％！important;
position：fixed！important;
top：125px; right：0; bottom：0;左：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单转换（transform 1s ease-out）;
@extend％ui-shadow;
& :: - webkit-scrollbar {
display：none;
}
& .animate {
@include transform（translate3d（0％，0，0））;
@include单转换（transform 1s ease-out）;
}
}
}
.no-scroll {
position：fixed;
}
$（'body'）。on（'click'，'.js-side-nav-toggle'，function
$（'html，body'）。toggleClass（'no-scroll'）;
}）;
I am making a side navigation that pops out and that works fine, but the issue is when that pane appears (using translate3d), when scrolling using an iPhone or emulation mode in Chrome, it will scroll the <body> behind it, it is as if my finger presses through the layer.
On desktop browsers at mobile width it works exactly as intended. The navigation appears, scrolling is locked to the navigation pane and the background elements are not scrolled.
I feel this may be due to translate3d and how it interacts with z-index? But that's a poorly educated guess.
Here's what I am working with:
.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');
});
To quickly summarise: I bring in a layer using translate3d, I then want to restrict scrolling and ontouchmove events to that layer and all elements behind it to be ignored.
Thank you for your time.
Edit:
I managed to fix this by adding position: fixed; to .no-scroll which was applied to html and body when the menu toggle was clicked. I updated my code above with working code.
I managed to fix this by adding position: fixed; to .no-scroll which was applied to html and body when the menu toggle was clicked. I updated my code above with working code.
.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');
});
这篇关于禁用在触摸设备上滚动后面的图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
