Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't scroll past a horizontal scrolling area on touch devices

See original GitHub issue

We have a number of areas on our sites eg. tables of data that need to be horizontally scrollable. The problem we are seeing is that when using the plugin it stops the user being able to scroll down the page unless they touch outside of the horizontally scrolling area.

I have been able to fix this for some touch devices by using the following css .mCustomScrollBox.mCSB_horizontal { touch-action: pan-y pinch-zoom; }

Unfortunately this does not work for iOS Safari.

Issue Analytics

State:
Created 6 years ago
Comments:9

Top GitHub Comments

17reactions

nickyblissAvivacommented, Jun 23, 2017

@PaperCoder

Have managed to procure an iPhone in the office and tested on our test environment and changing the CSS to

.mCustomScrollbar,
.mCustomScrollbar.mCS_touch_action,
.mCustomScrollbar.mCS_touch_action .mCS-aviva.mCSB_scrollTools {
	-ms-touch-action: auto;
	    touch-action: auto;
}

.mCustomScrollBox {
	-ms-touch-action: pan-x;
	    touch-action: pan-x;
}

.mCustomScrollBox.mCSB_vertical_horizontal {
	-ms-touch-action: auto;
	    touch-action: auto;
}

.mCustomScrollBox.mCSB_horizontal {
	-ms-touch-action: pan-y;
	    touch-action: pan-y;
}

Seems to ensure that the iPhone works, Windows Phone is also happier when touch-action is set too as without it at all, it got a bit sluggish when scrolling horizontally. We’ll need to perform our full browser testing now but its looking hopeful that we have got a solution.

0reactions

nickyblissAvivacommented, Jun 23, 2017

Thats very odd. Will have to try that Monday when I have access to the devices again.