javascript - 如何在向下滚动时平滑地降低div的高度，并在向上滚动时以相同的速率增大它的高度？

这是我到目前为止所拥有的。

的HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div></div>

<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>

的CSS

div {

position:fixed;
top:10px;
left:10px;
width:200px;
height:400px;
background-color:red;

}

JS

$(document).ready(function() {
    var height = $("div").height();
    $(document).scroll(function() {
        var lastScrollTop = 0;
        $(window).scroll(function(event) {
            var st = $(this).scrollTop();
            if(st > lastScrollTop) {
                height = height - 1;
                $("div").css({
                    'height': height
                });
            } else {
                height = height + 1;
                $("div").css({
                    'height': height
                });
            }
            lastScrollTop = st;
        });
    });
});

这是一个codepen。 https://codepen.io/anon/pen/PBaVvB。

我不知道问题是什么。逻辑似乎很扎实！

但是有时它的高度下降快得多，反之亦然。有人可以帮忙吗？

最佳答案

使用onscroll，onmousemove等事件可能会平稳一些，因为它们仅在触发事件时才会触发。这些挑战颇具挑战性，因为它们有时会迅速开火，有时会缓慢开火，但之后不会继续。

    div {
      position:fixed;
      top:10px;
      left:10px;
      width:200px;
      height:400px;
      background-color:red;
    }

和

 $(document).ready(function() {
    var lastScrollTop = 0;
    var height=oheight = $("div").height();
    $(document).scroll(function() {
         height=$(this).scrollTop()/($(document).height()-$(window).height())*oheight;
         $("div").css({
            'height': height
         });
    });
});

关于javascript - 如何在向下滚动时平滑地降低div的高度，并在向上滚动时以相同的速率增大它的高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51685602/