代码之家 › 专栏 › 技术社区 › Eichhörnchen Natan R.

我如何才能停止滚动我的<div>onmouseover?

onmouseover scroll css jquery javascript

Eichhörnchen Natan R. · 技术社区 · 10 年前

现在我有一个自动无限滚动的div:

<script language="javascript">
    i = 0
    var speed = 1
    function scroll() {
        i = i + speed
        var div = document.getElementById("content")
        div.scrollTop = i
        if (i > div.scrollHeight - 160) { i = 0 }
        t1 = setTimeout("scroll()", 100)
        }
</script>

我需要滚动的div我想停止在mouseover上滚动,所以我向div添加了以下代码:

<div id="content" value="Pause" onmouseover="clearTimeout(t1)" onmouseout="scroll()">

Here is a link to a jfiddle. 那里的预览没有做它应该做的,但这就是我现在在我的项目中工作的东西。

到目前为止,这是可行的,但问题是,当我将鼠标悬停在这个分区上时,我希望能够手动滚动。现在,自动滚动正在停止,但我不能仅使用滚动轮手动滚动:滚动时的反应与使用onmouseover停止时的反应相同。

有没有一种方法可以基本上取消鼠标悬停上的整个滚动功能,或者编写一些只允许使用滚动轮/滚动条的东西。也也可以让代码始终允许使用滚动轮/滚动条。

我不知道做这件事最好的方法是什么。

谢谢

1 回复 | 直到 10 年前

Knyri 10 年前

通过将其设置为滚动溢出,假设高度固定,滚动条将弹出,您可以手动滚动。当然,当滚动条恢复自动滚动时,您需要再次隐藏滚动条,因此需要两个函数来设置样式。

<script language="javascript">
    i = 0;
    var speed = 1,t1=null;
    function startScroll(){
        document.getElementById("content").style.overflowY="hidden";
        scroll();
    }
    function stopScroll(){
        clearTimeout(t1);
        document.getElementById("content").style.overflowY="scroll";
    }
    function scroll() {
        i = i + speed;
        var div = document.getElementById("content");
        div.scrollTop = i;
        if (i > div.scrollHeight - 160) { i = 0; }
        t1 = setTimeout("scroll()", 100);
    }
</script>

HTML更改:

<div id="content" value="Pause" onmouseover="pauseScroll()" onmouseout="startScroll()">

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前