Overflow-x 滚动条在 Chrome 上不可见，直到我 select 并拖动内容？

Question

我需要制作一个适用于不同屏幕尺寸的数据网格。一种常见的方法是将网格元素包装在 div 和 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;
}

从技术上讲这是可行的，但我有一个用户体验问题。在 Chrome 上，滚动条最初不可见，因此用户可能不知道有他们看不到的可滚动内容：

在桌面上滚动的唯一方法 Chrome 是单击内容并向右拖动。那时会出现滚动条，但内容也会突出显示，这并不理想：

当内容比 overflow: auto 容器宽并因此可滚动时，是否可以使滚动条永久可见？或者是否有一种完全不同的方法在这种情况下很常见？

Answer 1

这里有一个选项供您选择： https://codepen.io/panchroma/pen/wvdrzMe

它应该在 OS X Chrome 和 Safari 上运行良好，并且很容易按照您想要的方式设置滑块样式。

::-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);
    }

Overflow-x 滚动条在 Chrome 上不可见，直到我 select 并拖动内容？

Overflow-x scrollbars aren't visible on Chrome until I select and drag on content?

css

google-chrome

responsive-design

user-experience