Menu
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.
608
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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With