Scroll bar issues iPad -- nearly fixed

May 02, 2016

Having scrollbar issues on an iPad (mobile safari). We are using a scrollbar to house our captions, and the one finger scrolling is suboptimal. We've done a lot of troubleshooting (CSS and Java functions re: webkit) and have gotten it closer, but it's still not ideal.

Essentially, when we scroll using the scrollbar, 8 times out of 10 the text in the scrollbar scrolls, and 2 times the whole page will scroll. It's just a bit too finnicky for production.

10-second Video here: https://drive.google.com/open?id=0ByvyVq5RrqIgNjhpbWQ0WGNwMWM

Has anyone had any luck with short scrollbars on iPads? Note: We can't change scrollbar height (by much at least). It's designed around content.

Thank you thank you for your help!

2 Replies
Think Up Consulting

Here's what we've done so far:

In Mobile > player.css – html and body tags (the webkit was also added to the scroller wrappers, but didn’t appear to have much/any affect)

margin: 0;

                padding: 0;

                height:100%;

                overflow:hidden; (also tried auto, this seemed to be different in different solutions, acted the same)

                -webkit-overflow-scrolling: touch;

In story.html and in stpry_html5.html

<script>

                document.body.addEventListener('touchmove', function(event) {

                 event.preventDefault();

});

</script>

Ashley Terwilliger-Pollard

Hi Alex,

I certainly understand the issue with the scrolling and moving the whole page - and our general documentation on the scrolling panels is here. 

As far as modifying the published output, I'd have to defer to the community for that and thanks for sharing here, as I know others like to see examples of how to accomplish other behavior such as that. 

This discussion is closed. You can start a new discussion or contact Articulate Support.