Javascript 如何使用 jQuery 在单击和鼠标悬停时使可滚动 div 滚动

How to make a scrollable div scroll on click and mouseover using jQuery

提问by sevens

Using the markup below how would I get the "#content" div to scroll up or down when I click or hover over the "#scrollUp" or "#scrollDown" anchor tag. Scrolling should be smooth preferably. If clicked it should scroll a specific amount (for touch devices) if mouseover it can scroll until mouseout.

使用下面的标记，当我单击或悬停在“#scrollUp”或“#scrollDown”锚标记上时，如何让“#content”div向上或向下滚动。滚动最好是平滑的。如果单击它应该滚动特定数量（对于触摸设备），如果鼠标悬停它可以滚动直到鼠标移开。

 <style>  
         #content {
         overflow:auto;
         height: 50px; /*could be whatever*/
                 }
  </style>

<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>

<div id="wrapper">
 <div id="content">

  <ul>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
  </ul>

 </div>
</div>

回答by Andrew Whitaker

You can use jQuery's animatefunction to accomplish a smooth-scrolling effect on clickor mouseover:

您可以使用 jQuery 的animate函数在click或上实现平滑滚动效果mouseover：

var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    // Cancel scrolling continuously:
    scrolling = false;
});


$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            // If we want to keep scrolling, call the scrollContent function again:
            scrollContent(direction);
        }
    });
}

Working example: http://jsfiddle.net/andrewwhitaker/s5mgX/

工作示例：http: //jsfiddle.net/andrewwhitaker/s5mgX/

(You'll have to disable the mouseoverand mouseoutevents to see the effects of the clickevent handler properly)

（您必须禁用mouseover和mouseout事件才能正确查看click事件处理程序的效果）

How it works:

这个怎么运作：

• Uses the animatefunction mentioned above to scroll smoothly by a specified amount on click.
• Uses a flag to enable continuous scrolling on when the link's mouseoverevent handler is called, and disable scrolling when the link's mouseoutevent handler.
• When scrollContentis called, if the scrollingflag is still trueafter the animation is completed, animate again in the same direction. The callback function parameter of animateallows us to take an action after animation has completed.

• 使用上述animate功能在单击时按指定量平滑滚动。
• 使用标志在mouseover调用链接的事件处理程序时启用连续滚动，并在链接的mouseout事件处理程序时禁用滚动。
• 当scrollContent被调用时，如果动画完成后scrolling标志仍然存在true，则在同一方向再次动画。的回调函数参数animate允许我们在动画完成后采取行动。

回答by BenG

Try using JavaScript instead of jQuery for this task. Google the function scrollBy()as in window.scrollBy()

尝试使用 JavaScript 而不是 jQuery 来完成此任务。谷歌功能scrollBy()如window.scrollBy()