Question

我试图在外部div周围有一个垂直滚动条并且水平内容溢出的效果。

要做到这一点，我一直在我的style.css中设置overflow-y为auto：

.outerdiv {
    background-color:brown;
    width: 100px;
    height: 100px;
    overflow-y: auto;
}

HTML：

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="outerdiv">
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
   </div>
<body>
</html>

但是这会显示垂直和水平滚动条。

如何摆脱水平滚动条并让内部内容（即xxx＆＃39; s）从outerdiv容器的右侧溢出并且只有一个垂直滚动条？

请参阅此plunker示例：https://plnkr.co/edit/ZTODuxvaAv4XN4hGHWu9?p=preview

Answer 1

您只需将overflow-x设置为隐藏：

.outerdiv {
    background-color:brown;
    width: 100px;
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

Answer 2

你可以用这个去除水平滚动条：

.outerdiv {
    background-color: brown;
    width: 100px;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}

但是在保持垂直滚动条的同时将额外的文本溢出到侧面而不是底部会导致冲突。如果滚动条挡住，它会坚决拒绝在内容区域外呈现水平溢出的文本，而不是强制使用水平滚动条。

通过JavaScript和滚动事件编写非官方滚动条的脚本，可以解决这个限制。

如何生成溢出y以生成垂直滚动条

2 个答案: