如何使用部分离开视口的div制作水平滚动条

Question

我正在尝试创建一个包含4个或5个其他div的div，并且我希望能够水平滚动/滑动div。

我已经尝试了一些我可以在StackOverflow上找到的东西，但是没有任何东西可以为我提供我打算做的事情。我也不太了解要查找的内容（脚本名称），这使它变得更加困难。

我希望有人能指出我正确的方向！

Answer 1

这是您想要的摘录

doc.addWorksheet({headers: ['A', 'B', 'C']}, function(addWorksheetErr, newSheet) {
  if (addWorksheetErr) console.error(addWorksheetErr);
  else {
    newSheet.addRow({ A: 1, B: 'two', C: 3 }, function(addRowErr, row) {
      // this works fine
    });
    newSheet.addRow({ X: 4, Y: 'five', Z: 6 }, function(addRowErr, row) {
      // This will get the "Blank rows cannot be written; use delete instead"
      // error, because there's no A, B, or C in the row data.
    });
  }

$('#recipeCarousel').carousel({
  interval: 2000
})

$('.carousel .carousel-item').each(function(){
    var next = $(this).next();
    if (!next.length) {
    next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    
    for (var i=0;i<3;i++) {
      next=next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }

      next.children(':first-child').clone().appendTo($(this));
    }
});

Answer 2

不建议这样做。您强制浏览器渲染某些内容，但该内容始终不会显示给用户。同样，在诸如21：9、32：9等屏幕上以不同的宽高比处理此问题可能会很棘手。

我宁愿建议您使用旋转木马之类的工具（例如，使用Materialize https://materializecss.com/carousel.html）

如果您真的想这样做，可以尝试使用CSS属性position: absolute;和position: relative;

Answer 3

.outerDiv {
  width: 1000px;
  display: flex;
  flex-direction: row;
}

.innerDiv {
  width: 200px;
  height: 200px;
  background-color: grey;
  margin: 10px;
}

<div class="outerDiv">
  <div class="innerDiv"></div>
  <div class="innerDiv"></div>
  <div class="innerDiv"></div>
  <div class="innerDiv"></div>
  <div class="innerDiv"></div>
</div>

Answer 4

我尝试了多种方法（上面的答案和其他轮播库），最终使用了OwlCarousel。 https://owlcarousel2.github.io/OwlCarousel2/