將鼠標懸停在圖像上滾動div的內容

我有一個div，其中有很多內容穿過頁面大小。所以我想知道是否可以在div上下分別添加「向上箭頭圖像」和「向下箭頭圖像」。當我將鼠標懸停在圖像上時，div上的內容將像在頁面上滾動的方式一樣開始滾動。但我不想要一個滾動條出現在我的div旁邊..我絕對只想當內容滾動時，我將鼠標懸停在圖像上。將鼠標懸停在圖像上滾動div的內容

在下面的代碼中，當我將鼠標懸停在「HOVER ME」div上時跳轉到div的末尾。所以我想要一個類似的功能與滾動效果和沒有滾動條旁邊..是否有可能？這是jsfiddle link

HTML代碼：

<a href="#last">Last</a> 
<div id="hover"> HOVER ME </div> 
<div id="container"> 
    <div><a name=""></a> One </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name=""></a> Stuff </div> 
    <div><a name="last"></a> Last </div> 
<br class="clear"> 
</div>

CSS代碼：

#hover{ 
    width:200px; 
    height:20px; 
border:1px solid #cc0000; 
} 
#container{ 
    width:500px; 
    height:300px; 
overflow-y:auto; 
    border:1px solid #000; 
} 
#container div{ 
    width:100px; 
height:100px;  
    float:left; 
} 
.clear{ 
clear:both; 
}

JAVASCRIPT：

$('#hover').hover(function(){ 
    window.location = '#last'; 
});

來源

2012-12-20 Nick Div

唯一的變化是在這裏：

$('#hover').hover(function(){ 
    $('#container').animate({ scrollTop: $('#container')[0].scrollHeight }, 1000); 
});

在我已經改變了overflow屬性來hidden容器的CSS樣式。

來源

2012-12-20 10:20:52

非常感謝。我在jQuery中有點新手。所以如果我必須滾動「向上」，我該如何修改小提琴......在此先感謝.. –

'$（'＃container'）。animate（{scrollTop：0}，1000）;' – BenM

@Minko Gechev thanks bro .. 我很感激。 –

爲什麼推倒重來

你可以使用jQuery插件http://logicbox.net/jquery/simplyscroll/vertical.html

來源

2012-12-20 10:19:28 Moes

爲什麼添加一個插件，當你可以做一個換行......少插件意味着更快的頁面加載等，這有助於用戶體驗和搜索引擎優化。 – webnoob

@Moes：謝謝，但webnoob是正確的。我認爲選擇的答案更好。但感謝您的幫助.. Upvoted。 –

@kapilchhattani歡迎您的光臨謝謝 – Moes

嘗試設置的時間間隔，然後動畫元素的scrollTop屬性：

$(function() { 
    var current_scroll = 0, 
     container = $('#container'), 
     timer 

    $('#hover').hover(function() { 
     timer = window.setInterval(scrollDiv, 30); 
    }, function() { 
     window.clearInterval(timer); 
    }); 

    function scrollDiv() 
    { 
     var new_scroll = current_scroll += 10; 
     container.scrollTop(new_scroll); 
     current_scroll = new_scroll; 
    } 
});

您可以修改間隔或量每次達到你想要的速度滾動。請在這裏看到一個工作演示>http://jsfiddle.net/tUYKS/

來源

2012-12-20 10:21:24 BenM

謝謝，但是一旦滾動完成，你的小提琴停止工作。但還是謝謝。 Upvoted。 –

這樣，您就可以獲取到last div在#container，發現div的offset()top，只是申請滾動。

$('#hover').hover(function(){ 
    $('#container').animate({ scrollTop: $('#container div:last').offset().top }, 1000); 
});

來源

2012-12-20 10:36:47 Jai

將鼠標懸停在圖像上滾動div的內容

回答

相關問題