Question

我正在尝试将此代码水平滚动，但由于某种原因，它会垂直滚动。将光标放在图像上并向下滚动以查看我的意思。

如何让它水平滚动？它有溢出x作为滚动。因此，所有图像都将在同一行而不是现在的2行。

element.style.position = "relative";

#images-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  position: relative;

  position: static;
}
#main-image {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
  padding-bottom: 53.666%;

  width: 100%;
  padding-bottom: 66.666%;
}
#image-thumbs {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  height: 100%;

  width: 100%;
  margin-left: 0;
  position: absolute;
  height: auto;
  top: 0;
  left: 0;
}
.image-thumb {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;

  width: 25%;
  padding-bottom: 16.666%;
  float: left;
}

#test-ar {
  float: left;
  width: 100%;
  height: auto;
  padding-bottom: 16.666%;
  background: orange;
  position: relative;
  overflow-x: scroll;
  /* overflow-y: hidden; */
}

Answer 1

不是浮动元素，而是对所有图像大拇指使用display: inline-block，并设置它的父级不使用white-space: nowrap包装内联元素。要删除单个图像拇指之间的空白，您只需注释掉线：

＆＃13;

#images-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
}
#image-thumbs {
  height: auto;
  margin-left: 2%;
  right: 0;
  height: 100%;

  width: 100%;
  margin-left: 0;
  position: absolute;
  height: auto;
  top: 0;
  left: 0;
  
  overflow-x: scroll;
  white-space: nowrap;
}
.image-thumb {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;

  width: 25%;
  padding-bottom: 16.666%;
  display: inline-block;
}

#test-ar {
  width: 100%;
  padding-bottom: 16.666%;
  background: orange;
  position: relative;
  overflow-x: scroll;
}

＆＃13;

<div id="images-wrap">
  <div id='test-ar'>
    <div id="image-thumbs">
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div><!--
      --><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div><!--
      --><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
      --><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
      --><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
      --><div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div><!--
    </div>
  </div>
</div>

＆＃13;

Answer 2

删除对width和float的所有引用，使外部容器展开flex，并使所有内部元素flex: 1 0 25%。

/* Outer container */
#image-thumbs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

/* Inner elements */
.image-thumb {
  flex: 1 0 25%
}

如果您需要演示，我可以为您创建一个。

Answer 3

以下是flex版本的请求演示。图像已被替换为占位符图像，因为原始图像似乎不再起作用。

＆＃13;

#image-thumbs {
    height: auto;
    margin-top: 25px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.image-thumb {
    margin-bottom: 6px;
    background-position: center;
    background-size: cover;
    height: auto;
    width: 25%;
    padding-bottom: 16.666%;
    flex: 1 0 25%;
}

＆＃13;

<div id="image-thumbs">
    <div class="image-thumb" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="image-thumb" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="image-thumb" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="image-thumb" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="image-thumb" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="image-thumb" style="background-image: url('http://via.placeholder.com/350x150')"></div>
</div>

＆＃13;

a demo on Codepen。

为什么这是垂直滚动而不是水平滚动？

3 个答案: