时间戳

首页 > 解决方案 > 对齐溢出内的项目：在容器内以全宽滚动

html - 对齐溢出内的项目：在容器内以全宽滚动

问题描述

所以这有点复杂......我有一个设置最大宽度的容器，在该容器内我有一个滑块，我希望它是全宽的，带有溢出-x：滚动，以便它滚动里面的内容它水平。

我使用此处找到的代码 ( https://css-tricks.com/full-width-containers-limited-width-parents/ ) 来强制容器内的全宽滑块 div 拉伸到屏幕边缘。

但是，在初始加载时，我希望滑块内第一项的 LEFT SIDE 与容器的左侧对齐（但当用户滚动时仍滚动到边缘），然后当用户到达最后一项时滑块，我希望这个项目继续滚动，直到它碰到容器的右侧。

我认为我需要在:first-child和:last-childpsuedo 上使用一些左/右边距做一些聪明的事情，但我无法弄清楚确保第一个项目完全从容器的左边缘开始，然后是最后一个孩子是什么总是在右边缘完成。（在任何屏幕尺寸下）

到目前为止，我已经设置了一个小提琴：

https://jsfiddle.net/89bk1fyp/

.container {
  max-width:600px;
  margin:0 auto;
  position:relative;
  background-color:#dedede;
}

.full-width-slider {
    overflow-x: auto;
    display:flex;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.one-item {
  min-width:300px;
  margin:20px 20px 20px 0;
  background-color:#000;
  color:#000;
}
<div class="container">
  <div class="full-width-slider">
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
    <div class="one-item">
      Lorem Ipsum
    </div>
  </div>
</div>

第一个黑框，我希望它在灰色容器的左边缘开始，但是当用户向右滚动时滚动到屏幕边缘......我想在灰色容器的右边缘结束的最后一个黑框，但仍然是全宽。

也许是这样的：

.one-item:first-child {
  margin-left: Calc?
}
.one-item:last-child {
  margin-right: Calc?
}

希望那是有道理的！？

标签： htmlcss

解决方案

您几乎可以根据此处使用的公式https://css-tricks.com/full-width-containers-limited-width-parents/#with-known-non-parent-width

它需要取反值，因为它用于使用负边距将全宽元素拖到两侧 - 你想要相反的情况，你希望第一个和最后一个滑块项目远离外边缘价值。

.one-item:first-child {
  margin-left: calc(-.5 * (-100vw + 600px));
}
.one-item:last-child {
  margin-right: calc(-.5 * (-100vw + 600px));
}

https://jsfiddle.net/jkt13h4n/

推荐阅读