我有这个div与滚动内容,我想停止滚动悬停但无法找到方法来做到这一点。尝试使用鼠标悬停功能,不知道它是否是正确的方式,但这不起作用。
这就是我迄今为止所拥有的:
window.verticalScroller = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if (top < temp) {
top = $('#verticalScroller').height()
$elem.css("top", top);
}
$elem.animate({
top: (parseInt(top) - 60)
}, 1500, function() {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
var i = 0;
$("#verticalScroller > div").each(function() {
$(this).css("top", i);
i += 60;
window.verticalScroller($(this));
});
});
#verticalScroller {
position: absolute;
width: 52 px;
height: 180 px;
border: 1 px solid red;
overflow: hidden;
}
#verticalScroller > div {
position: absolute;
width: 50 px;
height: 50 px;
border: 1 px solid blue;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="verticalScroller">
<div>1 Lorem ipsum dolor sit</div>
<div>2 Lorem ipsum dolor sit</div>
<div>3 Lorem ipsum dolor sit</div>
<div>4 Lorem ipsum dolor sit</div>
</div>
我用javascript完成了这个:
<script>
function launchScroll() {
if (window.verticalScroller != window.verticalScrollerProto)
window.verticalScroller = window.verticalScrollerProto;
var i = 0;
$("#verticalScroller > div").each(function() {
$(this).css("top", i);
i += 60;
window.verticalScroller($(this));
});
}
window.verticalScrollerProto = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if (top < temp) {
top = $('#verticalScroller').height()
$elem.css("top", top);
}
$elem.animate({
top: (parseInt(top) - 60)
}, 1500, function() {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
launchScroll();
});
$('#verticalScroller').hover(
function(){
window.verticalScroller = function(){};
},
function(){
launchScroll();
}
);
</script>
这个想法是循环函数是递归的并附加到窗口变量,所以我们可以清空该实体以停止循环。我首先从原型填充它,以便它的价值很容易恢复。
在Onmouseover上,用空的替换该函数。 Onmouseout,用递归函数替换空函数并重新启动循环。
尝试使用position: fixed
CSS属性。除非你有一些滚动的情况,这可以用纯CSS完成。
.hover-no-scroll:hover {
position: fixed;
}