我做了一个自动滚动的div。现在的任务是,如果光标悬停在某个块上,如何暂停此滚动,如果光标被移除,则如何从同一位置继续。帮助我们实现我们的计划。
$(document).ready(function(){
$(document).ready(function() {
var div = $('#vipLentaBox');
div.animate({ scrollTop: div.prop("scrollHeight")}, 30000); // 1000 мс для создания эффекта плавного перемещения к содержимому div
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div style="overflow-y: scroll; max-height: 400px;" id="vipLentaBox">
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
<div style="border:1px solid #CCC;padding:20px 10px;">Block content</div>
</div>