当鼠标悬停在按钮上时,代码会滚动div,如果将鼠标从悬停区域移开,则会停止滚动div。这适用于除Safari之外的所有浏览器。
以下是开发中的网站:http://dev.djrefine.com
这是左键的代码,几乎与右侧相同:
$('.scroll-left').hover(function(){
var scrollDistance = $('#makeMeScrollable').scrollLeft();
var scrollSpeed = scrollDistance * 2.5;
$('#makeMeScrollable').scrollTo('0px', scrollSpeed);
},function(){
$('#makeMeScrollable').stop();
$('#makeMeScrollable').scrollTo('-=20px', 100);
// stop on unhover
});
当鼠标离开悬停区域时,为什么safari没有停止的任何想法?
出于某种原因,当我制作一个jsfiddle时,它适用于Safari: http://jsfiddle.net/8Nkpr/1/
除了水平滚动和垂直滚动之间的切换之外,我的网站上有什么不同的想法?
请注意,在网站上,还有另一个功能可以在到达最左侧或最右侧时将按钮淡出:
var scrolledItem = $('#makeMeScrollable');
scrolledItem.scroll(function () {
if (scrolledItem.scrollLeft() == 0){
$('.scroll-left').fadeOut('fast');
}
else {
$('.scroll-left').fadeIn('fast');
}
if (scrolledItem[0].scrollWidth - scrolledItem.scrollLeft() == scrolledItem.outerWidth()) {
$('.scroll-right').fadeOut('fast');
}
else {
$('.scroll-right').fadeIn('fast');
}
});