如何在滚动下面的同级时缩小同级？

Question

这就是我想要实现的目标：

我没有看到简单的 CSS 解决方案。

我想到的只是改变：顶部栏的“顶部”位置（位置：相对），对于底部部分，我更改 margin-top （为负值）并增加 max-height。

这是所有代码：

.chat {
  width: 300px;
}

.header {
  background: #f3886d;
}

.top {
  background: #ffcdd3;
}

.text-xl {
  font-size: 48px;
}

.text-center {
  text-align: center;
}

.bottom {
  background: #f36e7e;
  overflow: auto;
  max-height: 200px;
}

<div style="display: flex; flex; gap: 24px;">
  <div class="chat">
    <div class="header text-center">STICKY</div>
    <div class="top">
      <div class="text-xl text-center">TOP BAR</div>
    </div>
    <div class="bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ante
      ex. Fusce laoreet nunc eget cursus tempor. Sed pharetra faucibus varius.
      Duis sodales tempor nisi. Praesent placerat, dui vehicula vestibulum
      vestibulum, orci nulla gravida ex, quis suscipit magna ligula non mauris.
      Integer pharetra sed enim quis posuere. Nunc mollis facilisis felis, quis
      porttitor enim tempor a. Etiam vulputate euismod lectus, sed sodales dui
      rhoncus in. Suspendisse sed ex imperdiet, semper purus facilisis, aliquam
      nisi. Aenean a aliquam lacus, ut posuere ante. Sed venenatis in orci non
      porttitor. Aliquam eu orci quis tortor tincidunt vulputate. Integer
      euismod non mi ut cursus. Etiam nec tincidunt neque. Quisque placerat leo
      sit amet nisi faucibus malesuada. Suspendisse vel urna quam. Sed quis arcu
      elit. Pellentesque mollis ante quis dui finibus placerat. Fusce pharetra
      rhoncus felis. Mauris tellus sapien, lacinia vitae vehicula sed, elementum
      nec neque. Aenean pretium sodales sapien tristique ultricies. Orci varius
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      Sed mollis volutpat mauris vitae aliquam. Etiam vitae urna eget lectus
      viverra rutrum vitae id ex. Etiam rhoncus pharetra magna, imperdiet
      vestibulum augue aliquam in. Morbi nunc ante, rutrum et luctus nec,
      pharetra vitae nunc. Maecenas et condimentum diam. Quisque lacus erat,
      imperdiet eget congue elementum, accumsan vel mauris. Proin mattis
      tincidunt lobortis. Curabitur non varius orci. Vivamus consectetur, neque
      ac scelerisque facilisis, velit magna malesuada massa, quis lacinia justo
      erat id urna. Pellentesque neque sapien, facilisis ut nunc a, semper
      iaculis erat. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Cras pellentesque tempor eros, vitae
      ultricies sem scelerisque et. Curabitur bibendum condimentum ante, in
      porttitor lacus dignissim sit amet. Sed hendrerit vulputate elit interdum
      dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      Vivamus lorem lectus, aliquet sit amet lorem sed, dapibus tempor nulla.
      Donec suscipit vitae odio tempus maximus. Nunc et arcu id odio consequat
      laoreet ut a ante. In eu elit sed nisi commodo fermentum maximus vel
      ipsum. Vivamus faucibus rutrum egestas. Quisque sed magna sed nulla
      condimentum lobortis a id justo. Ut dignissim dignissim eleifend. Donec
      luctus metus eu dolor bibendum, ut ullamcorper justo placerat. Phasellus
      in eros ligula. Curabitur rhoncus luctus nulla, in luctus libero euismod
      vel. Suspendisse tempor mi ac tincidunt vulputate. Integer et leo id massa
      aliquet mollis. Integer vel pharetra tellus. Cras non libero nec mi
      malesuada luctus in sit amet libero. Etiam sit amet libero purus. Vivamus
      sagittis, est sit amet facilisis tincidunt, enim ante vulputate nibh, a
      congue diam nibh sit amet libero. Suspendisse accumsan odio nec
      sollicitudin elementum. Nullam nec pharetra risus. Donec vitae elementum
      enim. Nunc faucibus, elit vitae scelerisque viverra, felis urna luctus
      ipsum, eu eleifend est ex quis diam. Etiam rhoncus sit amet felis ac
      blandit. Integer sodales turpis at augue accumsan accumsan. Quisque mollis
      felis ut ligula finibus, at faucibus mi vestibulum. Donec ultricies
      ultrices mi vitae suscipit. Vivamus malesuada nec ante in sollicitudin.
    </div>
  </div>
  <div class="chat" style="overflow: hidden">
    <div class="header text-center">STICKY</div>
    <div
      class="top"
      style="overflow: hidden; position: relative; z-index: -1; top: -24px"
    >
      <div class="text-xl text-center">TOP BAR</div>
    </div>
    <div class="bottom" style="margin-top: -24px; max-height: 224px">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ante
      ex. Fusce laoreet nunc eget cursus tempor. Sed pharetra faucibus varius.
      Duis sodales tempor nisi. Praesent placerat, dui vehicula vestibulum
      vestibulum, orci nulla gravida ex, quis suscipit magna ligula non mauris.
      Integer pharetra sed enim quis posuere. Nunc mollis facilisis felis, quis
      porttitor enim tempor a. Etiam vulputate euismod lectus, sed sodales dui
      rhoncus in. Suspendisse sed ex imperdiet, semper purus facilisis, aliquam
      nisi. Aenean a aliquam lacus, ut posuere ante. Sed venenatis in orci non
      porttitor. Aliquam eu orci quis tortor tincidunt vulputate. Integer
      euismod non mi ut cursus. Etiam nec tincidunt neque. Quisque placerat leo
      sit amet nisi faucibus malesuada. Suspendisse vel urna quam. Sed quis arcu
      elit. Pellentesque mollis ante quis dui finibus placerat. Fusce pharetra
      rhoncus felis. Mauris tellus sapien, lacinia vitae vehicula sed, elementum
      nec neque. Aenean pretium sodales sapien tristique ultricies. Orci varius
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      Sed mollis volutpat mauris vitae aliquam. Etiam vitae urna eget lectus
      viverra rutrum vitae id ex. Etiam rhoncus pharetra magna, imperdiet
      vestibulum augue aliquam in. Morbi nunc ante, rutrum et luctus nec,
      pharetra vitae nunc. Maecenas et condimentum diam. Quisque lacus erat,
      imperdiet eget congue elementum, accumsan vel mauris. Proin mattis
      tincidunt lobortis. Curabitur non varius orci. Vivamus consectetur, neque
      ac scelerisque facilisis, velit magna malesuada massa, quis lacinia justo
      erat id urna. Pellentesque neque sapien, facilisis ut nunc a, semper
      iaculis erat. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Cras pellentesque tempor eros, vitae
      ultricies sem scelerisque et. Curabitur bibendum condimentum ante, in
      porttitor lacus dignissim sit amet. Sed hendrerit vulputate elit interdum
      dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      Vivamus lorem lectus, aliquet sit amet lorem sed, dapibus tempor nulla.
      Donec suscipit vitae odio tempus maximus. Nunc et arcu id odio consequat
      laoreet ut a ante. In eu elit sed nisi commodo fermentum maximus vel
      ipsum. Vivamus faucibus rutrum egestas. Quisque sed magna sed nulla
      condimentum lobortis a id justo. Ut dignissim dignissim eleifend. Donec
      luctus metus eu dolor bibendum, ut ullamcorper justo placerat. Phasellus
      in eros ligula. Curabitur rhoncus luctus nulla, in luctus libero euismod
      vel. Suspendisse tempor mi ac tincidunt vulputate. Integer et leo id massa
      aliquet mollis. Integer vel pharetra tellus. Cras non libero nec mi
      malesuada luctus in sit amet libero. Etiam sit amet libero purus. Vivamus
      sagittis, est sit amet facilisis tincidunt, enim ante vulputate nibh, a
      congue diam nibh sit amet libero. Suspendisse accumsan odio nec
      sollicitudin elementum. Nullam nec pharetra risus. Donec vitae elementum
      enim. Nunc faucibus, elit vitae scelerisque viverra, felis urna luctus
      ipsum, eu eleifend est ex quis diam. Etiam rhoncus sit amet felis ac
      blandit. Integer sodales turpis at augue accumsan accumsan. Quisque mollis
      felis ut ligula finibus, at faucibus mi vestibulum. Donec ultricies
      ultrices mi vitae suscipit. Vivamus malesuada nec ante in sollicitudin.
    </div>
  </div>
</div>

你知道有更好的解决方案吗？

Answer 1

您提到的效果称为“视差效果”，其中不同的图层以不同的速度移动，通常会产生深度错觉。 要创建效果，您需要知道

用户滚动了多远

，并将元素移动了偏移量，其中效果应用了滚动距离的一小部分。 您可以通过从可滚动元素获取

scrollTop

属性来计算此偏移量。监听同一元素上的

scroll

事件，以在用户滚动时计算偏移量。

const chats = document.querySelectorAll('.chat');

for (const chat of chats) {
  const topBar = chat.querySelector('.top');
  
  chat.addEventListener('scroll', event => {
    const offset = chat.scrollTop / 2
    chat.style.setProperty('--chat-parallax-offset', `${offset}px`);
  }, { passive: true });
}

.chat {
  --chat-parallax-offset: 0px;
  
  overflow: auto;
  width: 300px;
  background: #ffcdd3;
  background: #f36e7e;
  max-height: 300px;
}

.header {
  background: #f3886d;
  position: sticky;
  top: 0;
  z-index: 10;
}

.top {
  position: relative;
  background: #ffcdd3;
  translate: 0 var(--chat-parallax-offset);
  will-change: translate;
}

.text-xl {
  font-size: 48px;
}

.text-center {
  text-align: center;
}

.bottom {
  padding: 15px;
}

<div style="display: flex; flex; gap: 24px;">
  <div class="chat">
    <div class="header text-center">STICKY</div>
    
    <div class="top">
      <div class="text-xl text-center">TOP BAR</div>
    </div>
    
    <div class="bottom">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ante
      ex. Fusce laoreet nunc eget cursus tempor. Sed pharetra faucibus varius.
      Duis sodales tempor nisi. Praesent placerat, dui vehicula vestibulum
      vestibulum, orci nulla gravida ex, quis suscipit magna ligula non mauris.
      Integer pharetra sed enim quis posuere. Nunc mollis facilisis felis, quis
      porttitor enim tempor a. Etiam vulputate euismod lectus, sed sodales dui
      rhoncus in. Suspendisse sed ex imperdiet, semper purus facilisis, aliquam
      nisi. Aenean a aliquam lacus, ut posuere ante. Sed venenatis in orci non
      porttitor. Aliquam eu orci quis tortor tincidunt vulputate. Integer
      euismod non mi ut cursus. Etiam nec tincidunt neque. Quisque placerat leo
      sit amet nisi faucibus malesuada. Suspendisse vel urna quam. Sed quis arcu
      elit. Pellentesque mollis ante quis dui finibus placerat. Fusce pharetra
      rhoncus felis. Mauris tellus sapien, lacinia vitae vehicula sed, elementum
      nec neque. Aenean pretium sodales sapien tristique ultricies. Orci varius
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      Sed mollis volutpat mauris vitae aliquam. Etiam vitae urna eget lectus
      viverra rutrum vitae id ex. Etiam rhoncus pharetra magna, imperdiet
      vestibulum augue aliquam in. Morbi nunc ante, rutrum et luctus nec,
      pharetra vitae nunc. Maecenas et condimentum diam. Quisque lacus erat,
      imperdiet eget congue elementum, accumsan vel mauris. Proin mattis
      tincidunt lobortis. Curabitur non varius orci. Vivamus consectetur, neque
      ac scelerisque facilisis, velit magna malesuada massa, quis lacinia justo
      erat id urna. Pellentesque neque sapien, facilisis ut nunc a, semper
      iaculis erat. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Cras pellentesque tempor eros, vitae
      ultricies sem scelerisque et. Curabitur bibendum condimentum ante, in
      porttitor lacus dignissim sit amet. Sed hendrerit vulputate elit interdum
      dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      Vivamus lorem lectus, aliquet sit amet lorem sed, dapibus tempor nulla.
      Donec suscipit vitae odio tempus maximus. Nunc et arcu id odio consequat
      laoreet ut a ante. In eu elit sed nisi commodo fermentum maximus vel
      ipsum. Vivamus faucibus rutrum egestas. Quisque sed magna sed nulla
      condimentum lobortis a id justo. Ut dignissim dignissim eleifend. Donec
      luctus metus eu dolor bibendum, ut ullamcorper justo placerat. Phasellus
      in eros ligula. Curabitur rhoncus luctus nulla, in luctus libero euismod
      vel. Suspendisse tempor mi ac tincidunt vulputate. Integer et leo id massa
      aliquet mollis. Integer vel pharetra tellus. Cras non libero nec mi
      malesuada luctus in sit amet libero. Etiam sit amet libero purus. Vivamus
      sagittis, est sit amet facilisis tincidunt, enim ante vulputate nibh, a
      congue diam nibh sit amet libero. Suspendisse accumsan odio nec
      sollicitudin elementum. Nullam nec pharetra risus. Donec vitae elementum
      enim. Nunc faucibus, elit vitae scelerisque viverra, felis urna luctus
      ipsum, eu eleifend est ex quis diam. Etiam rhoncus sit amet felis ac
      blandit. Integer sodales turpis at augue accumsan accumsan. Quisque mollis
      felis ut ligula finibus, at faucibus mi vestibulum. Donec ultricies
      ultrices mi vitae suscipit. Vivamus malesuada nec ante in sollicitudin.
    </div>
  </div>
</div>