在能够滚动的同时隐藏div内的水平滚动条

Question

我想将div中的水平滚动条隐藏得太宽，因为它看起来有点难看。我仍然希望能够滚动。例如：

我的HTML：

<div class="nav">
  <span class="nav"><a class="nav-current" href="index.html">About me</a></span>
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span> <!-- Copied those to test the behaviour -->
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
  <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
</div>

相应的CSS：

div.nav {
  overflow-y: hidden;
  white-space: nowrap;
}

有人可以帮我吗？提前谢谢！

Answer 1

隐藏滚动条的技巧是使用绝对定位的元素。

示例：

<div class="scrollbar-hider-container">
    <div class="nav-container">    
        <div class="nav">
            <span class="nav"><a class="nav-current" href="index.html">About me</a></span>
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span> <!-- Copied those to test the behaviour -->
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
            <span class="nav"><a class="nav" href="biography.html">Biography</a></span>
        </div>
    </div>
</div>

的CSS：

.nav {
  white-space: nowrap;
}
.nav-container {
  position: absolute;
  top: 0;
  bottom: -30px;
  left: 0;
  right: 0;
  overflow-x: scroll;
}
.scrollbar-hider-container {
  overflow:hidden;
  position:relative;
}

为了获得最佳效果，您可以使用js：

计算浏览器上使用的滚动条的实际高度

scrollBarWidth = function() {
        var scrollBarWidth = 0,
            scrollDiv = document.createElement('div');

        scrollDiv.className = 'scrollbar-measure';
        document.body.appendChild(scrollDiv);

        scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        document.body.removeChild(scrollDiv);

        return scrollBarWidth;
    }

的CSS：

.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

使用滚动条宽度，然后可以调整div中滚动元素的位置，并隐藏溢出。

Answer 2

要隐藏两个滚动条（X和Y），请添加以下规则：

overflow: hidden;

Answer 3

Y是垂直的，X是水平的。 overflow-y：hidden将解决。

Answer 4

使用overflow-y: hidden;

更改overflow-x: hidden;