通过将鼠标悬停在图像上滚动 div 的内容答案

【问题标题】：scroll the content of a div by hovering over an image通过将鼠标悬停在图像上滚动 div 的内容
【发布时间】：2012-12-20 10:14:31
【问题描述】：

我有一个包含很多内容的 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';
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

唯一的变化就在这里：

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

在容器的 CSS 样式中，我已将溢出属性更改为 hidden。

【讨论】：

谢谢，太好了。我是 jquery 的新手。所以如果我必须“向上”滚动，我该如何修改小提琴..提前谢谢..
$('#container').animate({ scrollTop: 0 }, 1000);
@Minko Gechev 谢谢兄弟.. 我很感激。
我很高兴有帮助！ :-) 最好的问候
上述小提琴链接已损坏。

【解决方案2】：

为什么要重新发明轮子

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

【讨论】：

当您可以进行单行更改时为什么要添加插件...更少的插件意味着更快的页面加载等，这有助于用户体验和 SEO。
@Moes：谢谢，但是 webnoob 是对的。我认为选择的答案更好。但是感谢您的帮助.. 赞成。

【解决方案3】：

尝试设置一个间隔，然后为元素的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/

【讨论】：

谢谢，但是一旦滚动完成，您的小提琴就会停止工作。但还是谢谢。赞成。

【解决方案4】：

这样你就可以到达#container中的last div，找到那个div的offset()top然后应用滚动。

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

【讨论】：