Scrolling fixed div with overflowing content on mobile
I have a responsive website and built-in Facebook slider for mobiles. So I made a very simple setup that still works pretty neatly. I have all content in .outer_wrapper
that fills the whole body. Below that wrapper is a div .slider
with the following CSS:
.slider {
position: fixed;
height: 100%;
right: 0;
top: 0;
width: 250px;
}
when i hit the trigger it shifts to the .outer_wrapper
left and appears .slider
.
$('.hamburger-menu').click(function() {
$('.outer_wrapper').animate({marginLeft: '-250px', marginRight: '-250px'}, 'slow');
});
The problem is that it .slider
has overflowing content but on mobile phones it refuses to scroll. It always scrolls the content .outer_wrapper
. I've tried -webkit-overflow-scrolling:touch;
and overflow-y: scroll;
.
Edit: Forgot to mention that .slider
it is not a child .outer_wrapper
. So my body looks like this:
<body>
<div class=".outer_wrapper">
<!-- all the lovely content is here -->
</div>
<div class="slider">
<!-- some menu items here -->
</div>
</body>
Any advice?
source to share
Ok guys updated this a bit. I found out that the problem came from a plugin I was using called Skrollr . When deactivated:
overflow-y: scroll;
or
overflow: scroll;
overflow-x: hidden;
works just fine. To make it smoother on Webkit devices, do the following:
-webkit-overflow-scrolling: touch;
This case changes the whole question, so I will mark this as the answer.
source to share
what I would like to suggest is to be .slider
located outside .outer_wrapper
. Then animate them by switching their class and using css transforms. This way they won't conflict with each other when the user swipes down the page.
try it
.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);
}
and for JQuery use the toggleClass function like this:
$('.hamburger-menu').click(function() {
$('.outer_wrapper’).toggleClass(‘hide’);
$(‘.slider’).toggleClass(‘reveal’);
});
Hope this helps?
source to share