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

Question

我正在使用JS / SCSS构建以下组件，但我无法实现一件事，我用Google对其进行了搜索，但未获得任何结果。正如您在下图中所看到的，图像在滚动时被延迟，它们仅在右边的文本稍微滚动一下后才开始动画，延迟为300ms。

是否可以延迟滚动行为或更改JS中元素的滚动速度？

Answer 1

您可以使用absolute或relative放置的div，并在top属性和Delphi Chromium - launch a command in Delphi application when button in web page is clicked by user上进行过渡。

可以使用transition delay在onscroll处理程序中动态设置顶部。

查看下面的代码段，或查看scrollTop以获得更好的示例。

$("#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>