英文:
JavaScript: detect page is scrolling on scroll-behavior: smooth and deprecate scroll event in this case
问题
function scrollHandler() {
if (!document.body.classList.contains('smooth-scrolling')) {
console.log("scroll");
}
}
window.addEventListener("scroll", throttledScrollHandler);
window.addEventListener("click", (e) => {
if (e.target.closest("a")) {
document.body.classList.add('smooth-scrolling');
setTimeout(() => {
document.body.classList.remove('smooth-scrolling');
}, 1000);
console.log("clicked");
}
});
英文:
I have a scroll event and I have links in HTML which smoothly scroll page content via scroll-behavior: smooth. And I need my scroll event execute ONLY if there is no scroll by link click.
Here is a small example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function scrollHandler() {
console.log("scroll");
}
const throttledScrollHandler = throttle(scrollHandler, 200);
window.addEventListener("scroll", throttledScrollHandler);
window.addEventListener("click", (e) => {
if (e.target.closest("a")) {
// I can kill this event listener onclick, but when could I disable it?
//window.removeEventListener('scroll', scrollHandler)
console.log("clicked");
}
});
function throttle(callback, delay) {
let timer = null;
return function throttledFunc(...args) {
if (timer) {
return;
}
timer = setTimeout(() => {
callback(...args);
if (timer) {
clearTimeout(timer);
timer = null;
}
}, delay);
};
}
<!-- language: lang-css -->
html {
scroll-behavior: smooth;
}
body {
font-family: Arial;
}
section {
display: flex;
justify-content: center;
align-items: center;
height: 150vh;
font-size: 40px;
color: #fff;
}
section:nth-of-type(1) {
background-color: black;
}
section:nth-of-type(2) {
background-color: grey;
}
section:nth-of-type(3) {
background-color: black;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
</body>
</html>
<!-- end snippet -->
I need to do something to prevent here scroll mark in console if I click a link, but stay if I simply scroll.
Here is a codesandbox with this example
答案1
得分: 1
你可能需要使用wheel事件而不是scroll事件。以下是可以对你的JavaScript进行的更改以获得所需的效果。
function scrollHandler() {
console.log("scroll");
}
const throttledScrollHandler = throttle(scrollHandler, 200);
window.addEventListener("wheel", throttledScrollHandler);
window.addEventListener("click", (e) => {
if (e.target.closest("a")) {
console.log("clicked")
}
});
function throttle(callback, delay) {
let timer = null;
return function throttledFunc(...args) {
if (timer) {
return;
}
timer = setTimeout(() => {
callback(...args);
if (timer) {
clearTimeout(timer);
timer = null;
}
}, delay);
};
}
英文:
You might need to use the wheel event instead of the scroll event. Here are the changes you can make to your javascript to get the desired effect.
function scrollHandler() {
console.log("scroll");
}
const throttledScrollHandler = throttle(scrollHandler, 200);
window.addEventListener("wheel", throttledScrollHandler );
window.addEventListener("click", (e) => {
if (e.target.closest("a")) {
console.log("clicked")
}
});
function throttle(callback, delay) {
let timer = null;
return function throttledFunc(...args) {
if (timer) {
return;
}
timer = setTimeout(() => {
callback(...args);
if (timer) {
clearTimeout(timer);
timer = null;
}
}, delay);
};
}
``
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论