Question

我正在尝试水平滚动。它显示滚动条但不滚动？ <下面是

<!DOCTYPE html>
<html>
<head>
    <title>qwe</title>
</head>
<body>
<div style="width: 1000px; overflow-: scroll;">
    <div style="float: left;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div style="float: left;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div style="float: left;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
    <div style="float: left;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
    <div style="float: left;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
    <div style="float: left;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
    <div style="float: left;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
</div>
</body>
</html>

Answer 1

将display: inline提交给孩子，而不是float:left和white-space: nowrap给父母。

<body>
<div style="width: 300px; overflow: scroll; white-space: nowrap;">
    <div style="display: nline;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div style="display: nline;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div style="display: nline;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
    <div style="display: nline;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
    <div style="display: nline;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
    <div style="display: nline;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
    <div style="display: nline;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
</div>
</body>

Answer 2

您可以将display：内联到子级，而不是使用float：left和空白：nowrap到父级。

<body>
<div style="width: 300px; overflow: scroll; white-space: nowrap;">
    <div style="display: nline;">aaaaaaa</div>
    <div style="display: nline;">bbbbbbb</div>
    <div style="display: nline;">ccccccc</div>
    <div style="display: nline;">ddddddd</div>
    <div style="display: nline;">eeeeeee</div>
    <div style="display: nline;">fffffff</div>
    <div style="display: nline;">ggggggg</div>
</div>
</body>

Answer 3

你的div太宽，所以不需要显示滚动指示器。此外，您有一个小错误，其中包含overflow-而不是overflow css属性。

如果您想要横向滚动，请尝试减小div宽度：

<body>
<div style="width: 300px; overflow: scroll;">
    <div style="float: left;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div style="float: left;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div style="float: left;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
    <div style="float: left;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
    <div style="float: left;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
    <div style="float: left;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
    <div style="float: left;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
</div>
</body>

希望有所帮助：）

Answer 4

不仅仅是你可以进行水平滚动。只显示滚动条不会让它滚动。我创建了一个Codepen链接，它肯定会帮助您实现您的要求。

codepen

.container {  
  display: flex;
  border: 1px solid #ddd;
  max-width: 300px;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  transform: rotate(-90deg);
  position: relative;
}

.wrapper {
  display: flex;
  width: 300px;
  height: 300px;
  transform: rotate(90deg);
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

article {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  min-width: 100%;
}

检查并确认是否符合您的要求。

如何在主要内部水平滚动div

4 个答案: