html - 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/