仅将一行中的一个元素固定在右侧，其他元素应滚动

Question

.custom-container {
    width: 500px;
    height: 80px;
    overflow-x: auto;
    overflow-y: hidden;
}

<div class="custom-container">
    <div class="row">
        <div class="item">....</div>
        <div class="item">....</div>
        <div class="item">....</div>
        <div class="item">....</div>
        <div class="item">....</div>
        <div class="item">....</div>
    </div>
</div>

比方说，当自定义容器中存在4个项目时，就会发生溢出情况。 但是我需要将第一个元素（项目）固定在自定义容器的右端，其余元素应该可以滚动。

Answer 1

这是水平滚动版本的代码。相同的概念，只是使项目成行内嵌，这样它们就不会占用宽度的100％，并且将容器的空白空间设置为nowrap，因此它们可以并排放置。

body{
  height: 100vh;
  width: 100vw;
}

.container-overflow{
  padding: 100px 0;
  margin-top: 100px;
  width: 400px;
  height: 100px;
  background-color: black;
  overflow-x: scroll;
  white-space: nowrap;
}

.item{
  width: 150px;
  height: 80px;
  background-color: red;
  margin-top: 10px;
  display: inline-block;
}

#fixed{
  position: fixed;
  left: 400px;
  top: 100px;
  transform: translateX(-100%);
  background-color: blue;
}

<div class="container-overflow">
  <div class="item" id='fixed'></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

除非父元素是窗口，否则无法相对于其父元素固定元素。但是，如果您知道父元素的宽度和固定元素的宽度，则可以使用CSS变换属性将其放置在所需的位置。

body{
  height: 100vh;
  width: 100vw;
}

.overflow-container{
  margin-top: 100px;
  position: relative;
  height: 200px;
  width: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #000;
}

.items{
  height: 90px;
  background-color: red;
  margin-bottom: 10px;
  width: 100px;
}

#right{
  background-color: blue;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(100px) translateX(400px);
}

<div class="overflow-container">
  <div class="items" id="right"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>