Question

我想实现一种“橡胶”效果：就像当我们滚动超过极限时，滚动元素滚动“超过”极限。

所以我考虑过在边缘进行CSS转换。 margin-top转换按预期工作。但是margin-bottom应该“推动元素向上”，所以我们看到它的下边界被推动。现在它看起来像可滚动元素变长，但不是“向上推”。

谁能看到我做错了什么？

const scrollWrapper = document.getElementById('scrollWrapper');
const scrollChild = scrollWrapper.children[0];
const buttons = document.querySelectorAll('button');
const topBtn = buttons[0];
const bottomBtn = buttons[1];

topBtn.addEventListener('click', () => {
  scrollWrapper.scrollTop = 0; // so it goes up and show the effect
  scrollChild.style.marginTop = '20px';
  setTimeout(() => scrollChild.style.marginTop = '0px', 2000);
});

bottomBtn.addEventListener('click', () => {
  scrollWrapper.scrollTop = scrollWrapper.scrollHeight; // so it goes down and show the effect
  scrollChild.style.marginBottom = '20px';
  setTimeout(() => scrollChild.style.marginBottom = '0px', 2000);
});

#scrollWrapper {
  overflow-y: scroll;
  height: 130px;
}

section {
  margin: 10px;
}

section>div {
  margin: 0px;
  transition: margin .7s ease;
  height: 1000px;
  background-image: linear-gradient( red, yellow);
}

<section id="scrollWrapper">
  <div></div>
</section>
<section>
  <button>Top margin</button>
  <button>Bottom margin</button>
</section>

我可以用JavaScript（jsFiddle）强制它，但这感觉不对。我觉得它是一个我不太了解的CSS细节。

可滚动div中的边距转换效果

0 个答案: