Html5，锚点之间的动画答案

【问题标题】：Html 5, Animating between anchor pointsHtml5，锚点之间的动画
【发布时间】：2012-11-04 06:23:16
【问题描述】：

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

【问题讨论】：

标签： html animation scroll anchor

【解决方案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;

然后，您可以使用锚点构建您的代码，然后单击前进到所需位置。就是这样。

【讨论】：