div overflow-y 不显示滚动条

如果你想要一个 `div` 容器在其内容超过容器大小时隐藏滚动条，但仍然能够进行滚动操作，你可以使用 CSS 的 `overflow-y` 属性结合 `display: -webkit-box` 或 `-ms-flexbox` 来实现。这样滚动条不会直接显示出来，而是通过调整容器内部元素的位置来模拟滚动效果。下面是具体的CSS样式：

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: hidden; /* 隐藏滚动条 */
}

在这种情况下，如果用户试图滚动，容器内的内容会自动滚动，但由于滚动条不可见，用户体验可能会稍微有些不同。若需在某些特定条件下显示滚动条，可以使用 JavaScript 来动态控制 `overflow-y` 属性。

相关问题

css除了overflow-y scroll滚动还有什么可以滚动的

除了 `overflow-y: scroll`，CSS 还提供了以下属性可以滚动：

1. `overflow-x: scroll`：允许在水平方向上滚动内容。
2. `overflow: auto`：自动决定是否需要滚动条，如果需要则显示。
3. `overflow-x: auto`：自动决定是否需要水平方向的滚动条，如果需要则显示。
4. `overflow-y: auto`：自动决定是否需要垂直方向的滚动条，如果需要则显示。
5. `overflow: hidden`：隐藏任何溢出的内容，不能滚动。

这些属性可以用于任何具有固定高度和宽度的元素，如 `<div>` 或 `<iframe>`。

overflow-y: scroll;横向滚动示例

抱歉，我之前的回答有误，`overflow-y: scroll;` 是用来设置元素的垂直滚动条，而不是水平滚动条。如果需要水平滚动条可以使用 `overflow-x: scroll;`，若需要同时控制水平和垂直滚动条，则可以使用 `overflow: scroll;`。以下是一个示例：

HTML 代码：

<div class="container">
  <div class="content">
    <p>这是一段很长的文本，需要滚动才能查看完整内容。</p>
  </div>
</div>

CSS 代码：

.container {
  width: 200px;
  height: 100px;
  overflow: scroll; /* 同时控制水平和垂直滚动条 */
}

.content {
  width: 300px;
  height: 200px;
}

在以上示例中，`.container` 元素设置了固定的宽度和高度，并且使用 `overflow: scroll;` 来同时控制水平和垂直滚动条。`.content` 元素则设置了一个比 `.container` 元素更大的宽度和高度，使得其内容超出了 `.container` 元素，从而触发滚动条。用户可以通过滚动条来查看完整的内容。