如何使用 jQuery 在单击和鼠标悬停时使可滚动 div 滚动 [英] How to make a scrollable div scroll on click and mouseover using jQuery

问题描述

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

 <样式>#内容 {溢出:自动；高度:50px；/* 可以是任何 */}</风格><a id="scrollUp" href="#">up</a><a id="scrollDown" href="#">down​​</a><div id="包装器"><div id="内容"><ul><li>这里有一些内容</li><li>这里有一些内容</li><li>这里有一些内容</li><li>这里有一些内容</li><li>这里有一些内容</li><li>这里有一些内容</li>

解决方案

你可以使用 jQuery 的 animate 函数，用于在 click 或 mouseover 上实现平滑滚动效果:

var step = 25;var 滚动 = 假；//为scrollUp"链接连接事件:$("#scrollUp").bind("click", function(event) {event.preventDefault();//按指定的值对 scrollTop 属性进行动画处理//步.$("#content").animate({scrollTop: "-=" + 步长 + "px"});}).bind("mouseover", function(event) {滚动 = 真；滚动内容(向上")；}).bind("mouseout", function(event) {//取消连续滚动:滚动 = 假；});$("#scrollDown").bind("click", function(event) {event.preventDefault();$("#content").animate({scrollTop: "+=" + 步长 + "px"});}).bind("mouseover", function(event) {滚动 = 真；滚动内容(向下")；}).bind("mouseout", function(event) {滚动 = 假；});功能滚动内容(方向){var amount = (direction === "up" ? "-=1px" : "+=1px");$("#content").animate({滚动顶部:数量}, 1, 函数() {如果(滚动){//如果我们想继续滚动，再次调用 scrollContent 函数:滚动内容(方向)；}});}

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

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

工作原理:

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

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.

 <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>

解决方案

You can use jQuery's animate function to accomplish a smooth-scrolling effect on click or 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/

(You'll have to disable the mouseover and mouseout events to see the effects of the click event handler properly)

How it works:

• Uses the animate function mentioned above to scroll smoothly by a specified amount on click.
• Uses a flag to enable continuous scrolling on when the link's mouseover event handler is called, and disable scrolling when the link's mouseout event handler.
• When scrollContent is called, if the scrolling flag is still true after the animation is completed, animate again in the same direction. The callback function parameter of animate allows us to take an action after animation has completed.

这篇关于如何使用 jQuery 在单击和鼠标悬停时使可滚动 div 滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！