英文:
How can I make this inverted scrolling script work more efficiently?
问题
以下是翻译好的内容：
我正在设计的网页非常长，加载到底部。我需要将滚动反转，以便访问者不必向上滚动才能回到顶部。我正在使用的脚本没有完全阻止正常滚动，并引起了一些问题。
function onScroll(velocity) {
var win = $(window)
$(win).on('wheel', function(event) {
event.preventDefault()
var direction = event.originalEvent.deltaY > 0? 'down': 'up';
var position = win.scrollTop();
if (direction === 'up') {
$('html, body').animate({
scrollTop: (position + velocity)
}, 40);
}
else if (direction === 'down') {
$('html, body').animate({
scrollTop: (position - velocity)
}, 40);
}
})
}
onScroll(70);
对于这个脚本，可以进行哪些调整以简化流程？
英文:
The webpage I'm designing is very tall and loads in at the bottom. I need the scrolling to be inverted so visitors won't have to scroll up to get to the top. The script I'm using doesn't fully prevent normal scrolling and causes some issues:
function onScroll(velocity) {
var win = $(window)
$(win).on('wheel', function(event) {
event.preventDefault()
var direction = event.originalEvent.deltaY > 0? 'down': 'up';
var position = win.scrollTop();
if (direction === 'up') {
$('html, body').animate({
scrollTop: (position + velocity)
}, 40);
}
else if (direction === 'down') {
$('html, body').animate({
scrollTop: (position - velocity)
}, 40);
}
})
}
onScroll(70);
What adjustments could be made to the script to streamline the process?
答案1
得分: 0
你不一定需要jQuery。以下是一个使用纯JavaScript来反转“滚轮”滚动方向的示例：
const elScroll = document.documentElement;
elScroll.addEventListener("wheel", (evt) => {
evt.preventDefault();
const delta = Math.sign(-evt.deltaY);
elScroll.scrollBy({
top: 70 * delta,
// behavior: "smooth" // 不会起作用，恐怕
});
}, { passive: false });
body {
border: 3px dashed;
height: 300vh;
}
向上滚动以向下滚动，反之亦然
遗憾的是，选项 behavior: "smooth" 与上述代码不会正常工作。要使动画正常工作，您需要找到另一种解决方法。
英文:
You don't necessarily need jQuery.
Here's an example using pure JavaScript to invert the "wheel" scroll direction:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const elScroll = document.documentElement;
elScroll.addEventListener("wheel", (evt) => {
evt.preventDefault();
const delta = Math.sign(-evt.deltaY);
elScroll.scrollBy({
top: 70 * delta,
// behavior: "smooth" // will not work I'm afraid
});
}, { passive: false });
<!-- language: lang-css -->
body {
border: 3px dashed;
height: 300vh;
}
<!-- language: lang-html -->
Wheel-up to scroll down, and vice-versa
<!-- end snippet -->
Sadly the option behavior: "smooth" will not work correctly with the above. For animations to work you'll have to find another workaround.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论