Question

我有滚动内容的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>

Answer 1

尝试使用position: fixed CSS属性。除非你有一些滚动的情况，否则这可以用纯CSS完成。

.hover-no-scroll:hover {
  position: fixed;
}

Answer 2

我用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，用递归函数替换空函数并重新启动循环。

使用javascript停止滚动div

2 个答案: