水平滚动条功能正常，但仅在某些情况下可见

Question

我有一个跨越多个屏幕长度的表(水平)。我试过同时使用overflow: auto;和溢出:滚动;从技术上讲，滚动是有效的，箭头键是有效的，如果我拖动并突出显示表格的文本到右边，表格就会滚动(滚动条在执行这两项操作时显示)，但如果没有发生任何事情，它就会再次变为不可见。我不相信滚动条在错误的位置，因为当我刷新页面时，它会正确地短暂显示，如果我使用箭头键或如上所述的拖动，滚动条确实出现在正确的位置。是否有不同的设置来保持水平滚动条可见?

<div class="analytics-table-class">
<table class="analytics-content-table">
<thead>
<tr>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
<th>alkdjslskdfjakdjsfkflkdja</th>
</tr>
</thead>
</table>
<div>

CSS

.analytics-content-table {
border-collapse: collapse;
margin: 20px 0;
font-size: 15px;
min-width: 80%;
margin-left: auto;
margin-right: auto;
table-layout: fixed;
}
.analytics-table-class{
width:100vw; 
overflow: scroll;
}
.analytics-content-table thead tr {
background-color: green;
color: white;
text-align: left;
font-weight: bold;
}
.analytics-content-table th,
.analytics-content-table td {
padding: 12px 15px;
font-size: 15px;
font-family: sans-serif;
}

代码已被简化/敏感信息被删除(为什么没有意义的部分)

编辑:这似乎是铬的问题。它可以在edge中正确运行，正如有人评论的那样，它可以在codepen中工作。如果可能的话，仍在寻找修复chrome。

Answer 1

当我在几个不同的浏览器中查看这个时，页面底部有一个水平滚动条。你所经历的可能是两者之间的某种互动。

页面底部的滚动条是因为你的主div使用了100%的视口，但对于一些浏览器，html或正文可能有边距和填充，使边缘的那些像素被推出视口。

试着把这个添加到你的css中:

html, body {
padding: 0;
margin: 0;
}