Question

我正在尝试实现一个动态页面，其树状结构非常容易超出宽度。我想通过浏览器的水平滚动条本身滚动树，这样就不会为div显示单独的滚动条。 CSS属性是：

body{
overflow-x:auto;
background-color: #ffffff;}

#campaign {
width: 100%;
overflow: auto;
white-space: nowrap;}

以下是我当前输出的屏幕截图。

Output

垂直向上滚动时，底部水平滚动消失。

感谢。

Answer 1

您可以在容器div中将溢出设置为visible，这将导致内容超出100％宽度边界并在主体上添加滚动条。

以下是一个简化示例：https://jsbin.com/bejimit/edit?html,css,output

它的CSS：

body {
  overflow-x: auto;
}

#campaign {
  display: inline-block;
  width: 100%;
  overflow: visible;
  white-space: nowrap;
}
.content-item {
  width: 300px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}

如何使用浏览器滚动内部div的x溢出？

1 个答案: