javascript - 如何延迟元素上的默认浏览器滚动？

Question

我正在使用 JS/SCSS 构建以下组件，但我无法实现一件事，我用谷歌搜索但没有得到任何结果。正如您在下图中看到的那样，图像在滚动时被延迟，只有在右侧的文本稍微滚动后它们才开始动画，有 300ms 的延迟。

有没有办法延迟滚动行为或者改变JS中元素的滚动速度？

Answer 1

您可以使用 absolute 或 relative 放置的 div，并在 top 属性和 transition delay 上进行转换。 .

顶部可以在您的onscroll 处理程序中动态设置，使用scrollTop .

查看下面的代码片段或查看 this pen一个更好的例子。

$("#container").scroll(function(){
  var scrollTop = $(this).scrollTop();
  $("#box").css({"top":(scrollTop+50)+"px"});
  $("#box2").css({"top":(scrollTop+70)+"px"});
});

#container {
  height: 200px;
  width: 200px;
  overflow: scroll;
  
}

#box {
  position: relative;
  top: 50px;
  left: 0;
  height: 40px;
  width: 40px;
  background-color: red;
  transition: top .2s;
}
#box2 {
  position: relative;
  top: 70px;
  left: 0;
  height: 40px;
  width: 40px;
  background-color: green;
  transition: top .2s;
  transition-delay: .05s;
}

#content {
  position: relative;
  top: 0;
  left: 50px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="box"></div>
  <div id="box2"></div>
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada leo eget nisl euismod vestibulum. Proin nulla urna, ornare non erat vitae, mattis ultrices urna. Etiam elementum, tortor id lacinia mollis, risus odio accumsan ex, eu egestas nisi lacus at purus. Cras vitae orci condimentum, dictum ante nec, laoreet nunc. Cras ut tristique libero. Pellentesque tempus feugiat elit non imperdiet. Cras ac gravida enim, nec pharetra sem. Maecenas luctus leo id quam sodales, sit amet scelerisque sapien efficitur. Pellentesque aliquet fermentum molestie. Praesent a lacinia tellus. Vivamus ut rutrum ex. Pellentesque dapibus magna a mauris facilisis tincidunt. Phasellus vulputate eros ac ultrices lacinia. Mauris sed eleifend enim. Sed eu ultrices nisi.

Sed eget porttitor purus. Praesent quis commodo dolor. Morbi vitae egestas magna. Quisque eu pellentesque velit. Cras eu arcu in tortor bibendum laoreet. Quisque sed turpis risus. Vestibulum efficitur urna malesuada diam dictum, at viverra leo finibus. Duis dignissim justo sem, et euismod nisi aliquam at. Fusce pretium lacus a pretium pulvinar. Aliquam ligula nisl, sodales vel aliquet at, malesuada ac nulla. Nam lorem leo, fermentum nec volutpat id, tincidunt ac diam. Phasellus at congue ligula. Aliquam nibh mi, tempor eu auctor id, sollicitudin eu ante. Donec quis nunc molestie, pretium turpis quis, venenatis arcu.

Quisque quis auctor odio. Maecenas ullamcorper ultricies elementum. Nam sed accumsan turpis. Suspendisse viverra at augue vel lacinia. Nulla eu magna in nisl dapibus sollicitudin ut in sem. Fusce et orci nibh. Suspendisse blandit, erat non pretium condimentum, felis justo hendrerit nisi, quis lacinia eros orci a nibh. Aenean nisl mi, convallis sed convallis vitae, posuere non nunc. Quisque condimentum lorem ut urna tristique hendrerit. Cras suscipit placerat consectetur. Nullam ut iaculis lectus. Suspendisse ultrices sem urna, sit amet efficitur mi eleifend rutrum. Curabitur magna nisi, mollis quis lorem maximus, luctus pretium elit. Nunc commodo tortor sed justo condimentum ultrices. Nullam at ante sit amet leo ullamcorper fringilla. Duis ac purus at mauris fermentum pulvinar.

Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur turpis sapien, semper id nisi at, volutpat aliquam nisi. Quisque nec porttitor odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus suscipit ullamcorper lacus. Mauris lobortis luctus dignissim. Suspendisse non pharetra tortor, ut convallis nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada, turpis nec ultrices tempor, lorem ex fringilla nunc, et efficitur lacus nisl quis nunc. Ut vestibulum elit est, id volutpat libero porttitor in. Mauris sed ante commodo, tristique quam in, molestie mauris. Duis eget porta magna, vitae fermentum ligula. Donec a dapibus nibh, in placerat metus. Donec vulputate metus vitae sapien facilisis pharetra. Nullam dui justo, maximus vel volutpat a, sodales id ligula.

Integer finibus lacus leo, eu semper tellus maximus lobortis. Nulla facilisi. Etiam lobortis interdum quam, non venenatis ligula luctus non. In laoreet, tellus at hendrerit tempus, dolor ex egestas est, in hendrerit libero nulla sit amet est. Vestibulum sem lorem, aliquam in lacus in, rutrum vulputate turpis. Morbi placerat tortor vel scelerisque auctor. Nunc in velit laoreet, egestas ante vitae, faucibus enim. Nam iaculis eros eu efficitur pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sagittis porttitor feugiat. In nibh diam, imperdiet non dapibus sed, dapibus vitae urna. Mauris blandit tincidunt neque non gravida. Curabitur vel lectus nec lectus ullamcorper pretium at dapibus felis. Nulla fermentum, dui et sagittis facilisis, ante mi dignissim quam, non auctor nisl ante vitae mi. In vestibulum, ante vitae tempus ultrices, enim risus tristique nisi, eu aliquet augue nulla eu magna. Fusce volutpat augue sit amet felis blandit aliquam.

</div>
</div>