Question

我有一个包含多个部分的网页。

要从一个部分切换到另一部分，我不使用滚动条，而是通过单击（菜单，分页，箭头等）完成所有操作

用户进入某个区域后，背景就会立即更改颜色，每个区域都变为其颜色。

创建这种功能没有问题，但是我有一个性能问题。

或者我不知道这是逻辑问题

如果我将事件绑定到滚动条上，并在该部分位于正确的位置时要求颜色更改，那就更好了

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

    if ( sectionPosition === 0 ){


        // Do something...
    }
}))

或者如果我将事件与事件委托绑定到不同的可点击元素上，那就更好了

     window.addEventListener('click', function(event){
    let selector = event.target.getAttribute("href");


    if( selector === "#section-one"){

        //....
    }

    if(selector === "#section-two"){

        //....
    }
})

Answer 1

我认为第二个选择很好，在滚动上添加侦听器将导致您滚动的每个px都调用回调，因此使操作显式要好于隐式处理许多不需要的调用

为获得最佳效果，您需要在每个元素上而不是在整个窗口上添加click事件监听器，以避免触发任何点击的点击回调。

要在目标项目上添加点击事件

const sectionOneEl = document.querySelector('#section-one');

sectionOneEl.addEventListener('click', ev => {
  // section one click handler
});

事件侦听器滚动或单击

1 个答案: