HTML：当垂直滚动仅在父元素上时冻结水平滚动条位置

Question

我在html中有这种情况：

<div class="outer">
   <div class="inner"></div>
</div>


.outer{
  height: 300px;
  overflow-y: scroll;
}

.inner{
  height: fit-content;
  overflow-x: scroll;
}

因此，我有父 div 和子 div。 孩子没有垂直滚动，如果它溢出 - 父母得到滚动条 - 这是设计使然，我需要它。

子 div 只有水平滚动，但您必须滚动父 div 直到看到子 div 的末尾才能访问水平滚动：

这不好，我希望用户始终看到水平滚动，而不仅仅是垂直滚动到末尾时。

我知道当垂直滚动也在内部 div 上时，默认情况下存在这种行为，但在这种情况下，我必须垂直滚动在外部。

Answer 1

您可能想为您的问题添加一些额外的清晰度，因为在确定您想要的行为时需要进行一些猜测工作。但如果我理解/猜对了，您想关闭 overflow-x 所以它到了底部就看不见了？

.outer{
  height: 300px;
  overflow-y: scroll;
  
}

.inner{
  width: 200px;
  height: fit-content;
  overflow-x: hidden;
}

<div class="outer">
   <div class="inner">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus et urna vitae vulputate. Vivamus volutpat metus et erat rutrum, sit amet tincidunt sapien malesuada. Proin semper euismod vestibulum. Pellentesque eget dapibus arcu. Curabitur sit amet tempus justo. Aliquam orci ligula, molestie sit amet pulvinar condimentum, commodo ut velit. Phasellus ullamcorper viverra ipsum. Donec nec laoreet turpis, sed congue ex. Vestibulum pharetra, massa eget tristique ultrices, nibh turpis faucibus lectus, quis semper mauris turpis vel est.


   </div>
</div>