滚动时CSS隐藏滚动条

Question

我想要水平溢出，当屏幕宽度不是那么宽时，DIV 开始向右-向左滚动，但我希望它看起来不那么难看，我现在拥有它（div 底部的滚动条）。

.wrapper {
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
}

.content {
    margin: 0 auto;
    width: 1198px;
}

HTML

<div class=wrapper>
  <div class=content">
    My content here.. 
  </div>
</div>

还有另一个问题 - CSS 是否有设置允许“滑动”div 而不是“拖动和移动”..？

Answer 1

对于具有浏览器支持的纯 CSS 解决方案，您可以使用::-webkit-scrollbar 和一些填充的组合，如下所示：

.wrapper {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-right: 17px; /* This hides the right scrollbar */
    padding-bottom: 17px; /* This hides the bottom scrollbar */
}

.content::-webkit-scrollbar { 
    display: none; 
}

<div class="wrapper">
  <div class="content">
    <img src="https://via.placeholder.com/1500x700" />
  </div>
</div>

最好在 JSFiddle 中使用：https://jsfiddle.net/thepio/pavb2hfy/