css - 在我选择并拖动内容之前，Chrome 上看不到溢出-x 滚动条？

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

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

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

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

标签： cssgoogle-chromeresponsive-designuser-experience

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