1

すべてのコンテンツが 1 つの長いページにあり、ユーザーがスクロールできず、アンカー間でアニメーション化されるボタンをクリックしてサイトをナビゲートする必要がある、ビジネス用の Web サイトを作成することを考えています。次のページを指します。ホームポイントがオフィスである長い画像を作成し、ユーザーは空に上がり、さまざまなページのスペースに入ることができます。では、ユーザーがスクロールできないようにする方法と、各アンカー間でアニメーション化またはゆっくりとスクロールする方法を教えてください。横スクロールも可能でしょうか？

4

1 に答える 1

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;

次に、アンカー ポイントを使用してコードを作成し、クリックすると目的の場所に進むことができます。それでおしまい。

于 2012-11-04T09:56:41.337 に答える