在html中添加页面滚动监听并优化性能的方法有：1. 使用节流（throttle）限制函数执行频率，适用于希望事件以一定频率触发的场景；2. 使用防抖（debounce）确保函数在停止触发一段时间后才执行，适用于只关心最后一次触发结果的场景；3. 获取滚动位置并与目标比较，用于判断是否滚动到特定位置；4. 使用stoppropagation()和preventdefault()处理滚动事件与其他事件的冲突。这些方法能有效提升滚动监听的性能并避免卡顿问题。
想要在HTML中添加页面滚动监听，其实核心就是利用JavaScript的scroll事件。简单来说，就是当页面滚动时，触发一个你预先定义好的函数，在这个函数里，你就可以做你想做的事情，比如改变导航栏的样式、加载更多内容等等。
window.addEventListener('scroll', function() {
// 在这里编写你的代码，当页面滚动时会执行
console.log('页面正在滚动...');
});如何优化滚动监听性能，避免卡顿？
滚动监听很容易造成性能问题，特别是当你在监听函数里做一些复杂的计算或者DOM操作时。想象一下，页面稍微滚动一下，你的函数就被调用很多次，如果每次调用都很耗时，页面就会变得卡顿。
一个常见的优化方法是使用throttle（节流）或debounce（防抖）技术。它们的作用都是限制函数被调用的频率。
立即学习“前端免费学习笔记（深入）”；
-
节流 (throttle)：确保函数在一段时间内最多执行一次。就像水龙头，你拧开后，水会以一定的频率滴下来，而不是一下子全部涌出来。
function throttle(func, delay) { let timeoutId; let lastExecTime = 0; return function(...args) { const context = this; const now = Date.now(); if (!timeoutId) { if (now - lastExecTime >= delay) { func.apply(context, args); lastExecTime = now; } else { timeoutId = setTimeout(() => { func.apply(context, args); lastExecTime = Date.now(); timeoutId = null; }, delay - (now - lastExecTime)); } } }; } const throttledScrollHandler = throttle(function() { console.log('节流后的滚动事件'); }, 200); // 每200毫秒最多执行一次 window.addEventListener('scroll', throttledScrollHandler); -
防抖 (debounce)：只有在停止触发一段时间后，才执行函数。就像电梯关门，如果有人进来，电梯会重新计时。
function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(context, args); timeoutId = null; }, delay); }; } const debouncedScrollHandler = debounce(function() { console.log('防抖后的滚动事件'); }, 200); // 停止滚动200毫秒后执行 window.addEventListener('scroll', debouncedScrollHandler);
选择节流还是防抖，取决于你的具体需求。如果希望事件以一定的频率执行，就用节流；如果只关心最后一次事件的结果，就用防抖。
如何判断页面滚动到特定位置？
有时候，你可能需要在页面滚动到某个特定位置时才执行某些操作，比如当用户滚动到页面底部时加载更多内容。
要实现这个功能，你需要获取当前滚动条的位置，然后与目标位置进行比较。
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
if (scrollPosition + windowHeight >= documentHeight - 100) { // 提前100像素加载
console.log('滚动到接近页面底部了！');
// 在这里加载更多内容
}
});这里window.scrollY、document.documentElement.scrollTop、document.body.scrollTop都是用来获取滚动条位置的，但不同的浏览器支持的属性可能不同，所以需要都判断一下。window.innerHeight是窗口的高度，document.documentElement.scrollHeight是整个文档的高度。
滚动监听与其他事件监听的冲突及处理
滚动监听有时会与其他事件监听产生冲突，尤其是在一些复杂的交互场景下。例如，你可能同时监听了鼠标滚轮事件和页面滚动事件，这可能会导致一些意想不到的结果。
解决这类冲突的关键在于理解事件的传播机制，并合理地使用stopPropagation()和preventDefault()方法。
-
stopPropagation()：阻止事件继续向上冒泡，防止父元素或文档的其他部分接收到该事件。 -
preventDefault()：阻止事件的默认行为，例如阻止链接跳转或表单提交。
举个例子，如果你在一个可滚动的div元素上同时监听了鼠标滚轮事件和scroll事件，你可能希望当鼠标在div上滚动时，只触发div的滚动，而不是整个页面的滚动。
<div id="scrollableDiv" style="width: 200px; height: 200px; overflow: auto;">
<!-- 内容 -->
</div>
<script>
const scrollableDiv = document.getElementById('scrollableDiv');
scrollableDiv.addEventListener('wheel', function(event) {
event.stopPropagation(); // 阻止事件冒泡到window
// 处理div内部的滚动
});
window.addEventListener('scroll', function() {
// 处理页面滚动
});
</script>在这个例子中，stopPropagation()阻止了鼠标滚轮事件冒泡到window，从而避免了触发页面的滚动事件。
