1

I need to make a data grid that works at different screen sizes. A common approach is just to wrap the grid element in a div with overflow-x: auto.

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/eYWEoya

<div class='page'>
  <h1>Heading</h1>
  
  <div class="grid">
    <div class="grid-inner">
      <div>Heading1</div>
      <div>Heading2</div>
      <div>Heading3</div>
      <div>Heading4</div>
      
      <div>Here is come content 1</div>
      <div>Here is come content 2</div>
      <div>Here is come content 3</div>
      <div>Here is come content 4</div>
    </div>
  </div>
</div>
.page {
  background: grey;
  margin: auto;
  max-width: 200px;
}
.grid {
  overflow-x: auto;
}
.grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-inner div {
  padding: 20px;
}

Technically this works but I have a UX concern. On Chrome the scrollbars arn't initially visible so a user might not know there is scrollable content which they can't see:

enter image description here

The only way to scroll on desktop Chrome is to click on the content and drag to the right. At that point the scrollbars appear although content is also highlighted which isnt ideal:

enter image description here

Is it possible to make the scrollbars be permanently visible when the content is wider than it's overflow: auto container and is therefore scrollable? Or is there a totally different approach that is common in this scenario?

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • We're talking about Chrome on a mobile device, right? Because on desktop, the scrollbar is always visible. In that case, https://stackoverflow.com/questions/22907777/make-scrollbar-visible-in-mobile-browsers might work! – Constantin Groß Jul 21 '21 at 10:12
  • @ConstantinGroß No im talking about desktop Chrome. The first screenshot (without scrollbars) was taken on my MacBook running desktop Chrome v91. – Evanss Jul 21 '21 at 11:03
  • Oh, ok, so that's OS-dependent then, interesting! Apparently, the solution I linked doesn't work on iOS devices, either... =/ – Constantin Groß Jul 21 '21 at 11:37

1 Answers1

0

Here's one option for you: https://codepen.io/panchroma/pen/wvdrzMe

It should work well on OS X Chrome and Safari and it's easy enough to style the slider the way you want.

enter image description here

::-webkit-scrollbar {
        width: 8px;
        background-color:#aaa;
    }

 ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #000;
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50