Overflow-x 滚动条在 Chrome 上不可见,直到我 select 并拖动内容?
Overflow-x scrollbars aren't visible on Chrome until I select and drag on content?
我需要制作一个适用于不同屏幕尺寸的数据网格。一种常见的方法是将网格元素包装在 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
容器宽并因此可滚动时,是否可以使滚动条永久可见?或者是否有一种完全不同的方法在这种情况下很常见?
这里有一个选项供您选择:
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);
}
我需要制作一个适用于不同屏幕尺寸的数据网格。一种常见的方法是将网格元素包装在 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
容器宽并因此可滚动时,是否可以使滚动条永久可见?或者是否有一种完全不同的方法在这种情况下很常见?
这里有一个选项供您选择: 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);
}