2010-02-10 62 views
0

我正在使用jQuery scrollTo來滾動被溢出的div內的內容。當我點擊鏈接時,div會垂直滾動其內容。不過,當我將鼠標懸停在鏈接上時,我希望發生這種效果,而不是點擊它們。垂直滾動懸停而不是點擊? jquery api

我不認爲這是jQuery的scrollTo選項。但是,有一個用於hover事件的jQuery API方法。

這可能看起來像一個簡單的問題,但有沒有辦法通過懸停而不是點擊來維持「scrollTo」的垂直滾動功能?

垂直滾動:

jQuery(function ($) { 
    $.localScroll.defaults.axis = 'y'; 
    $.localScroll({ 
     target: '#content', 
     // could be a selector or a jQuery object too. 
     queue: true, 
     duration: 500, 
     hash: false, 
     onBefore: function (e, anchor, $target) { 
      // The 'this' is the settings object, can be modified 
     }, 
     onAfter: function (anchor, settings) { 
      // The 'this' contains the scrolled element (#content) 
     } 
    }); 
}); 

懸停:

$("#page-wrap li.button").hover(function(){ /* vertically slide here? */ });V 

回答

1

平滑滾動與scrollTo插件:

 $('#page-wrap li.button-down').hover(function(){ 
      var scrollDistance = $('body').scrollTop(); 
      var scrollHeight = $('#content').height(); 
      var windowHeight = $('body').height(); 
      var scrollSpeed = (scrollHeight - scrollDistance - windowHeight) * 2.5; // higher than 2.5 is slower, lower is faster 
      $('body').scrollTo('100%', scrollSpeed); 
     },function(){ 
      $('body').stop().scrollTo('+=20px', 100); 
      // stop on unhover 
     }); 

這將向下滾動。所以,很簡單,使向上滾動按鍵

 $('#page-wrap li.button-up').hover(function(){ 
      var scrollDistance = $('body').scrollTop(); 
      var scrollSpeed = scrollDistance * 2.5; // higher than 2.5 is slower, lower is faster 
      $('body').scrollTo('0px', scrollSpeed); 
     },function(){ 
      $('body').stop().scrollTo('-=20px', 100); 
      // stop on unhover 
     }); 

小提琴例如:http://jsfiddle.net/8Nkpr/1/