Cuộn trên di chuột, nhấp để xem tốc độ

Question

Tôi đang cố gắng làm cho trang của mình cuộn khi bạn di chuột lên div. Đây là những gì tôi có cho đến nay

$(document).ready(function() { 
    $("#hoverscroll").mouseover(function() { 
     var div = $('body'); 
     setInterval(function(){ 
      var pos = div.scrollTop(); 
      div.scrollTop(pos + 1); 
     }, 100) 
    }); 
}); 

http://jsfiddle.net/3yJVF/

Tuy nhiên, có hai điều phải làm. Tôi cần nó để tăng tốc độ mỗi khi bạn nhấp vào, dừng lại khi bạn không còn lơ lửng và đặt lại tốc độ về mặc định.

Tôi đang cố gắng để đạt được một cái gì đó như thế này:

$(document).ready(function() { 
    $("#hoverscroll").mouseover(function() { 
     var div = $('body'); 

     setInterval(function(){ 
      var count = 1; 
      var pos = div.scrollTop(); 
      div.scrollTop(pos + count); 
     }, 100) 
    }); 

    $("#hoverscroll").click(function() { 
     if (count < 6) { 
      count = count+1; 
     } 
    }); 

    $("#hoverscroll").mouseleave(function() { 
     count = 0; 
    }); 
}); 

tôi đã tìm kiếm và tìm thấy một số người nói về ràng buộc sự kiện và thiết lập một biến toàn cục để kiểm tra nếu nó di chuyển. Nhưng chức năng trên có hoạt động không? Tôi vẫn đang học. Tôi có thể hoàn toàn sai.

Answer 1

Bạn đã được khá gần - đây là phiên bản của tôi (http://jsfiddle.net/Lcsb6/)

$(document).ready(function() { 
    var count; 
    var interval; 

    $("#hoverscroll").on('mouseover', function() { 
     var div = $('body'); 

     interval = setInterval(function(){ 
      count = count || 1; 
      var pos = div.scrollTop(); 
      div.scrollTop(pos + count); 
     }, 100); 
    }).click(function() { 
     count < 6 && count++; 
    }).on('mouseout', function() { 
     // Uncomment this line if you want to reset the speed on out 
     // count = 0; 
     clearInterval(interval); 
    }); 
}); 

Những thay đổi cần lưu ý:

• count được xác định trên khoảng/ràng buộc. Nó không hoàn toàn "toàn cầu" theo nghĩa là bạn có thể đến được nó trong cửa sổ, nhưng nó bị xuống hạng để sống bên trong việc đóng cửa onReady.
• interval là giá trị giao của setInterval - cách này chúng ta có thể ngăn chặn nó từ bất cứ điều gì làm sau đó với clearInterval
• Tôi chưa thấy mouseleave trước đó, nhưng mouseout nên làm điều đó.
• Trong jQuery, bạn có thể kết nối mọi thứ lại với nhau - vì vậy $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) sẽ giúp bạn tiết kiệm thời gian nhập bộ chọn mỗi lần. Ngoài ra, hãy xem phương pháp end() của jQuery nếu bạn định sử dụng chuỗi.
• Tôi thích sử dụng $.fn.on thay vì viết tắt như .click() - nó biểu thị rõ ràng rằng bạn đang sử dụng trình xử lý sự kiện, cân nhắc thêm một vài ký tự cho on và thả các ký tự dư thừa trong các lựa chọn $()?

Answer 2

thử sau đây chống lại các mã fiddle của bạn:

$(document).ready(function() { 
    $("#hoverscroll").mouseover(function() { 
     var div = $('body'); 
     setInterval(function(){ 
     var pos = $("#hoverscroll").postion().top;  
     window.scrollTo(0, pos + 1) 
    },500); 

}); 
}); 

thấy fiddle này: http://jsfiddle.net/3yJVF/5/

Answer 3

Bạn không phải là xa từ dung dịch. Bạn cần phải gán các interval hoặc timeout cho một biến và rõ ràng nó khi bạn di chuột ra khỏi yếu tố:

$(function() { 
    var speed = 1, 
     timer; 
    $("#hoverscroll").hover(function() { 
     var div = $('body'); 
     (function startscrolling(){ 
      timer = setTimeout(function() { 
       var pos = div.scrollTop(); 
       div.scrollTop(pos + speed); 
       startscrolling(); 
      }, 100); 
     })(); 
    }, 

    function() { 
     clearTimeout(timer); 
     speed = 1; 
    }) 
    .click(function(){ 
     if (speed < 6) speed++; 
    }); 

}); 

http://jsfiddle.net/3yJVF/2/