鼠标悬停时垂直滚动div

Question

当用户将鼠标悬停在 div 上时，我想让它垂直（向下）滚动，并在鼠标移开时让它滚动回 div 的顶部。

 $(".content").on('mouseover', '.description', function() { if ($(this).hasClass('scrolling')) return; console.log('in'); var maxscroll = $(this)[0].scrollHeight $(this).animate({ scrollTop: maxscroll }, 450); }); $(".content").on('mouseout', '.description', function() { $(this).stop(); console.log('out'); $(this).addClass('scrolling'); $(this).animate({ scrollTop: 0 }, 425, "linear", function() { $(this).removeClass('scrolling') }); });

 .content { height: 70px; width: 300px; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .content::-webkit-scrollbar { width: 0; height: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <div class="content"> <div class="description"> Lorem ipsum dolor sit amet, consectetr adipiscing elit. Fusce eget turpis a tortor porttitor eleifend. Phasellus tincidunt commodo purus non pellentesque. Nam a turpis magna. Vestibulum quis erat at dolor bibendum auctor in mattis orci. Etiam vehicula est at metus tempor, sit amet cursus velit bibendum. Sed varius sapien metus, non convallis sem scelerisque at. Nam ac elementum turpis, vel interdum turpis. Nunc et blandit lacus. Donec pellentesque dictum quam, non varius dui. Mauris elit eros, ultrices non justo at, auctor ornare nibh. Nam vehicula elit at ipsum placerat, nec dictum ex scelerisque. Pellentesque laoreet iaculis odio, id posuere risus. </div> </div> </div>

我想我已经接近了，但我还没有弄清楚为什么它还没有滚动。

Answer 1

这是因为事件侦听器回调中的$(this)不是指可滚动的.content元素，而是指的是.description 。 真的没有必要听从.description到.content的 mouseover/mouseout 事件。 你可以简单地这样做：

$(".content").on('mouseover', function() { ... }
$(".content").on('mouseout', function() { ... }

...并且$(this)将引用实际的.content元素，它将按预期滚动。 请参阅下面的概念验证：

 $(".content").on('mouseover', function() { if ($(this).hasClass('scrolling')) return; var maxscroll = $(this)[0].scrollHeight $(this).animate({ scrollTop: maxscroll }, 450); }); $(".content").on('mouseout', function() { $(this).stop(); $(this).addClass('scrolling'); $(this).animate({ scrollTop: 0 }, 425, "linear", function() { $(this).removeClass('scrolling') }); });

 .content { height: 70px; width: 300px; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; background-color: #ccc; } .content::-webkit-scrollbar { width: 0; height: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <div class="content"> <div class="description"> Lorem ipsum dolor sit amet, consectetr adipiscing elit. Fusce eget turpis a tortor porttitor eleifend. Phasellus tincidunt commodo purus non pellentesque. Nam a turpis magna. Vestibulum quis erat at dolor bibendum auctor in mattis orci. Etiam vehicula est at metus tempor, sit amet cursus velit bibendum. Sed varius sapien metus, non convallis sem scelerisque at. Nam ac elementum turpis, vel interdum turpis. Nunc et blandit lacus. Donec pellentesque dictum quam, non varius dui. Mauris elit eros, ultrices non justo at, auctor ornare nibh. Nam vehicula elit at ipsum placerat, nec dictum ex scelerisque. Pellentesque laoreet iaculis odio, id posuere risus. </div> </div> </div>

但是，如果您真的应该坚持将 mouseover/mouseout 事件绑定到嵌套的.description元素，那么您将需要将所有$(this)引用交换到$(this).closest('.content') ：

 $(".content").on('mouseover', '.description', function() { var $content = $(this).closest('.content'); if ($content.hasClass('scrolling')) return; var maxscroll = $(this)[0].scrollHeight $content.animate({ scrollTop: maxscroll }, 450); }); $(".content").on('mouseout', '.description', function() { var $content = $(this).closest('.content'); $content.stop(); $content.addClass('scrolling'); $content.animate({ scrollTop: 0 }, 425, "linear", function() { $content.removeClass('scrolling') }); });

 .content { height: 70px; width: 300px; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; background-color: #ccc; } .content::-webkit-scrollbar { width: 0; height: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <div class="content"> <div class="description"> Lorem ipsum dolor sit amet, consectetr adipiscing elit. Fusce eget turpis a tortor porttitor eleifend. Phasellus tincidunt commodo purus non pellentesque. Nam a turpis magna. Vestibulum quis erat at dolor bibendum auctor in mattis orci. Etiam vehicula est at metus tempor, sit amet cursus velit bibendum. Sed varius sapien metus, non convallis sem scelerisque at. Nam ac elementum turpis, vel interdum turpis. Nunc et blandit lacus. Donec pellentesque dictum quam, non varius dui. Mauris elit eros, ultrices non justo at, auctor ornare nibh. Nam vehicula elit at ipsum placerat, nec dictum ex scelerisque. Pellentesque laoreet iaculis odio, id posuere risus. </div> </div> </div>