html - Html 5，锚点之间的动画

Question

我正在考虑为我的企业创建一个网站，其中所有内容都在一个长页面上，用户将无法滚动浏览，您必须通过单击按钮来浏览网站，然后在锚点之间进行动画处理指向下一页。我将制作一个以办公室为起点的长图像，然后用户可以上天，然后为不同的页面留出空间。那么我将如何阻止用户滚动以及如何使其动画或在每个锚点之间缓慢滚动。是否也可以水平滚动？

Answer 1

我会尝试通过暂时禁用浏览器的滚动功能来解决您的问题。您可以通过取消绑定与按键或鼠标滚动关联的任何事件侦听器来实现此目的。

您可以通过阻止与事件处理程序关联的默认操作来拒绝触发鼠标滚动。从技术上讲，这是如何在 Javascript 中完成的：

window.onload = function() {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', disableScroll, false);
    } else if (window.attachEvent) { //IE event handler
        window.attachEvent('DOMMouseScroll', disableScroll);
    } else {
        window.onscroll = disableScroll;
    }
}

function disableScroll(event) {
    event = event || window.event;
    if (event.preventDefault) {
        event.preventDefault(); // prevent the default action to get triggered\
    }
    event.returnValue = false; // IE method
}

var keys = [37, 38, 39, 40];
function onKeydown(event) {
    var e = event || window.event;
    for (var i = 0, len =  keys.length; i < len; i++) {
        if (e.keyCode == keys[i]) {
            console.log("Forbidden event");
            e.preventDefault();
        }
    }
}

document.onkeydown = onKeydown;

然后，您可以使用锚点构建代码，然后单击前进到所需位置。而已。