0

メニュー項目にマウスを合わせると、div 内の各選択肢の説明を表示する jQuery-UI メニューを作成しました。ナビゲーションを容易にするためにメニュー項目を強調表示したまま、ユーザーがマウスホイールを使用して説明 div をスクロールできるようにしたいと思います。ここでコードの動作を確認できます: http://jsfiddle.net/ManOrMonster/Da97r/

$(function () {
  $('#menu').menu();
  $('.choice').mouseover(function () {
    var val = $(this).attr('id');
    if (val == 1) {
        desc = "This is the value of choice 1. It is a particularly good choice, unless you are not into 1, in which case this choice is probably not the best. Perhaps 2 or 3 would be a better choice for your tastes?";
    } else if (val == 2) {
        desc = "This is the value of choice 2. While not as interesting a choice as 1 or 3, simply because it is merely middle-of-the-road, it does have several advantages. Firstly, it is twice as many as 1. Secondly, it is not as bloated as 3, by virtue of being 1 less than said choice.";
    } else {
        desc = "This is the value of choice 3. Some people are not satisifed with 1. For others, 2 simply won't do. To please both of these categories of persons of discriminating tastes, 3 was introduced. Like its forerunners, it is exactly 1 more than the one preceding it; however, unlike those who precede it, it is only 1 less than 4, which is regrettably not a choice at all.";
    }
    $("#description").html(desc);
  });
});

アップデート

私が最終的にたどり着いたのは次のとおりです。

$('body').mousewheel(function(event, delta) {
    if (delta > 0){ // scroll direction is up
        $("#description").mCustomScrollbar("scrollTo","top",{scrollInertia:3000});
    } else {
        $("#description").mCustomScrollbar("scrollTo","bottom",{scrollInertia:3000});
}
});

これにより、スクロールが 1 回のスクロール後にスクロールし続ける場合でも、ユーザーが制御できるようにスクロールがスムーズに進みます。

4

1 に答える 1

0

このプラグインを使用できます: http://brandonaaron.net/code/mousewheel/docsでマウスホイールを検出し、div を取得してscrollTop手動でスクロールします。次のようになります。

$('body').mousewheel(function(event, delta) {
    var thisTop = $("#description").scrollTop();
    if (delta > 0){ // scroll direction is up
        $("#description").scrollTop(thisTop - delta);
    }
    else {
        $("#description").scrollTop(thisTop + delta);
    }
});

編集

プラグインには、のscrollTo代わりに使用できるメソッドがありscrollTopます。このコードを置き換えてみてください：

$("#description").scrollTop(thisTop - delta);

これとともに：

$("#description").mCustomScrollbar("scrollTo",thisTop - delta);
于 2013-04-03T21:12:44.907 に答える