Prinzhorn
iOS8 overflow-x on element broke when using skrollr
When using a skrollr-body container to implement mobile support, elements inside the skrollr-body container with overflow-x:scroll; seem to not work. This is tested on iOS8, but I haven't checked android. Consider for example the table-responsive class from Bootstrap 3. This simple class adds overflow-x:scroll to tables under 768px. These tables do not work with skrollr-body in place. Sample code:
<div class="skrollr-body">
<div class="table-responsive">
<table class="table">
<tr>
<td>Some long content</td>
</tr>
</table>
</div>
</div>
//Javascript
$s = skrollr.init({
forceHeight: false
});
It becomes impossible to horizontally scroll elements. This is pretty crippling to my current project and it looks like I might have to just disable it on mobile until a fix is found.
i have the same overflow issue on all smart devices. I can't scroll down on all smart devices. I only init the skrollr. i would like to use it, but seems like is not ready yet.
Well for your issue, you should be able to just wrap your entire contents in a div with an ID of skrollr-body. My issue is that horizontal scroll on elements contained in the skrollr-body element does not work.
Couldn't you check on touchmove to get the direction of the move, and then calculate the trajectory angle for the move, and if the angle is between 30deg and -30deg then do a stopPropagation as mentioned in the other issue? Or maybe I'm just blowing steam....
Couldn't you check on touchmove to get the direction of the move, and then calculate the trajectory angle for the move, and if the angle is between 30deg and -30deg then do a stopPropagation as mentioned in the other issue? Or maybe I'm just blowing steam....
In theory that's basically what you'd do. I've described the problem here https://github.com/Prinzhorn/skrollr/issues/670#issuecomment-72716747
