0

我制作了一个 jQuery-UI 菜单，当鼠标悬停在 div 中时，它会显示每个选项的描述。我想这样做，以便用户可以使用鼠标滚轮滚动描述 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});
}
});

这使得滚动足够顺畅，以便用户可以控制它，即使它会在单次滚动后继续滚动。

4

1 回答 1

0

您可以使用此插件：http ://brandonaaron.net/code/mousewheel/docs来检测鼠标滚轮，然后获取scrollTopdiv 并手动滚动它。可能看起来像这样：

$('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 回答