Question

我正在尝试在网络上使用“滚动”事件监听器，为我的项目添加一些运动设计。在这个测试项目中，我让div元素对用户在页面中滚动做出反应。

我的带有元素和脚本的html代码：

<div id="top_div" class="normal_height"></div>
<script src="js/scroll_top_element.js"></script>

在CSS中，我在两个类之间切换以通过某个“单击”点来调整div元素的高度。

.adapt_height{
height: 10vh;
}

.normal_height{
height: 25vh;
}

我的Javascript代码如下：我正在使用反跳功能来过滤掉过多的UI线程输入并提高应用程序的整体性能。

function debounce(func, wait=10, immediate = true){

var timeout; 

//debounce is a higher order function and will return another function 
return function run_code() {
    var context = this;

    //arguments is local variable of a function, refers to all arguments 
    var args = arguments; 

    //variable later is a function
    var later = function(){
        timeout = null;

        //if it is not time zero, apply checkSlide function 
        if(!immediate) func.apply(context, args);
    };

    var Callnow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if(Callnow) func.apply(context, args);
}
}

下一个函数侦听屏幕上的滚动，并且应该做两件事。首先是当用户滚动到设置为50的y标记时立即调整元素高度。这可以正常工作。

第二件事要做的是，当滚动通过“点击点y”时，使LINEAR元素的高度适应于窗口的滚动特性。我尝试使用“ element.style.height”，然后添加“ scrollY”属性以使其在屏幕上滚动时扩展。但这不起作用。由于某种原因，我无法将它们加起来。

window.addEventListener('scroll', debounce(function(){

var y = window.scrollY;
console.log(y);

if (y < 50){

    document.getElementById("top_div").className = "adapt_height";

    console.log(document.getElementById("top_div").className);
}

else {

    document.getElementById("top_div").className = "normal_height";

    document.getElementById("top_div").style.height += y; 

    console.log(document.getElementById("top_div").clientHeight);
}


}));

有什么建议吗？

Answer 1

将getElementById移出函数。使用变量存储元素引用。每10毫秒搜索一次DOM会占用大量资源。
.style.height不返回元素高度，请改用.clientHeight。但是同样，从DOM读取需要大量资源。也许您可以在不知道实际元素高度的情况下计算新高度。
.style.height += y您必须使用css单位设置值，例如10px而不是10

滚动位置确定元素高度-网络问题

1 个答案: