Elm-ui vertical scrollbar overlapping content

Learn
1

Hi all, I am struggling with elm-ui drawing content behind the vertical scrollbar in a column. Minimal example here: https://ellie-app.com/hYnsLCtyNyba1

Any clue what I am doing wrong? I’d like for the scrollbar to be next to the text elements, not on top of them.

1 Like
2

Hi R-VdP

I don’t think you’re doing anything wrong.

As you will have noticed, scrollbars in phone browsers tend to appear when scrolling and then disappear, and they’re usually small (like in your Ellie) so I don’t think this would be an issue for most users. But, on desktops, they are (?typically) permanent when there is stuff to scroll.

A simple solution would be to look at scrollbars in several browsers and then account for the largest. On desktop Chromium it’s (currently) 15px, which is quite large.

My solution – which would doubtless benefit from some refinement, doesn’t work on disappearing scrollbars, and is probably overkill :thinking: – is to measure the scrollbars:

  • Generate a view off-screen so it will never be seen (say using Element.above from elm-ui) that contains a large box inside a small box, thus causing scrollbars in the small box. I make the small container box as wide as the viewport and 200px high, and the large box about 10% larger in each direction.
  • Use Browser.Dom.getViewportOf to measure the smaller container box.
  • The width of the vertical scrollbar is screenViewport.width - containerBox.viewport.width
    The height of the horizontal scrollbar is 200 - containerBox.viewport.height.
  • Now you can pad your scrolling content by the right amount.

If keeping the boxes view off screen is difficult, you could programmatically remove it after you’ve measured it. Or place it under everything else with Element.behindContent.

If you must account for the disappearing scrollbars as well, you might try listening for the scroll event (Html.Events.on or in JavaScript via ports), and measuring when it fires. You might want to deactivate the event listener once you have a value as the event will fire a lot.

3

Thanks a lot for your answer. Being relatively new to frontend development, this caught me by surprise, that’s a fairly unfortunate difference between mobile and desktop.

Thanks again for your very detailed answer!

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.