js实现表格自动滚动，鼠标放上去后停止滚动且可手动滚动

已于 2023-03-09 22:16:58 修改
阅读量5.1k 收藏 18
点赞数 3
文章标签： javascript 前端
于 2022-05-25 09:06:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50441807/article/details/124959151
版权

scrollTop可以控制滚动的距离，可以设置一个永久定时器setInterval，每次执行定时器让scrollTop++，即可达到滚动的效果；
下面先理解js的几个属性：scrollHeight，offsetHeight，scrollTop，clientHeight：
clientHeight：元素的高度，包括（height+padding，不包括border）
offsetHeight：元素的高度，包括（height+padding，包括border）
scrollHeight：元素内部被滚动的元素的高度，假设<div class="father"><div class="son"></div></div>son的元素高度超出了father的高度，则father元素设置了可滚动，则father的scrollHeight其实就是son的高度
scrollTop：滚动时被卷入的高度
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
     
      width: 600px;
      height: 800px;
      border: 2px solid skyblue;
      overflow: hidden;
    }

    .box:hover {
     
      overflow-y: auto;
    }

    .text {
     
      width: 100%;
      height: 100px;
      border: 1px solid greenyellow;
    }
  </style>
最低0.47元/天 解锁文章
小智玩前端
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
js 自动滚动,鼠标移动停止滚动
Dreams of JAVAD
05-09 2583
var timer; function pageScroller() { timer = setTimeout("pageScroller()",3000); if(timer!=""&&timer!=null){ console.log("begin"); $(document.body).animate({s
利用JS+CSS实现滚动表格数据展示
06-06
"利用JS+CSS实现滚动表格数据展示"是一个常见的需求，它可以帮助用户逐行浏览大量的信息，而无需手动调整窗口大小。下面将详细介绍如何通过JavaScript（JS）和层叠样式表（CSS）来实现这一功能。 首先，我们需要...
js 无缝滚动，鼠标放上去暂停代码
12-02
js 无缝滚动，鼠标放上去暂停代码，供大家学习和程序中使用
前端利用JS实现自定义表格滚动效果
最新发布
zh626678的博客
06-24 468
利用js实现自定义表格滚动，在前端中数据可视化大屏中会有滚动表格的需求，不使用插件自己封装重复使用！！！！
js实现自动滚动
学敲代码的Stars的博客
12-20 3030
js实现自动滚动，再也不用求swiper组件啦。
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
weixin_65793170的博客
03-30 1万+
scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
JS实现表格无缝滚动（无限滚动效果）
qq_30907143的博客
09-11 3768
JS实现表格无缝滚动（无限滚动效果）
JS实现滚动条自动滚动（scrollTop）
热门推荐
陈浩然哦 的博客
06-18 3万+
js部分很简单：通过控制scrollTop的值来实现自动滚动效果； 注意（重点）： 1、scrollTop的值不可以加单位，谨记; 2、网页缩放比例会影响效果实现（下面具体说）； 3、如果这个元素没有被溢出，scrollTop为0； 4、设置的scrollTop值小于0，则scrollTop的值为0； 5、如果设置scrollTop的值超出了这个容器滚动的值，则scrollTop的值为容器最大...
让DIV的滚动条自动滚动到最底部scrollTop
一位前行者的博客
08-12 1832
制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。 聊天程序是基于websocket设计的，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。 这里推荐一个好用的一个平台（如流）： http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html 让滚动条自动有新信息滚动到底部首先请求websocket // test 是vue里封装的axios请求--params为带参 t
jquery无缝向上滚动实现代码
10-27
标题中的“jquery无缝向上滚动实现代码”指的是使用jQuery...这种无缝向上滚动的实现方式简单且实用，可以灵活地应用于各种需要滚动效果的场景，只需要调整相应的CSS样式和JavaScript参数，就可以适应不同的设计需求。
实现表格动态滚动效果
05-04
通过CSS+Javascript实现类似表格的动态滚动效果，用ul和li标签模拟表格，文件包括实现源码。
原生JS实现列表内容自动向上滚动效果
12-29
效果展示 （鼠标移入，滚动停止；鼠标移出，滚动继续） 实现原理 　　1. html结构：核心是ul > li，ul外层包裹着div。因为想要内容循环滚动无缝衔接，所以在原有ul后面还要有一个一样内容的ul。如下图： 　　   （红色边框为可视区域div，此处为了方便查看效果去除overflow:hidden；） 　　2. 样式方面：由于要滚动，所以必须2个ul的高度 > 外层可视div高度，且div必须设置overflow：hidden; 代码实现 HTML： <div id=review_box> <ul id=comment1> <li>第一条</li> <
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
08-31
在本文中，我们将讨论如何利用 Bootstrap 实现表格隔行变色、hover 变色以及在需要时显示滚动条的效果。 首先，为了实现这些功能，我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 文档的 `<head>` ...
Ext中的Grid控制纵向滚动条单次滚动量
03-20
当数据行数非常多时，用户可能希望自定义滚动条的滚动量，即单次滚动鼠标滚轮时，Grid表格移动的行数。这涉及到对Grid Panel的滚动行为进行定制。 首先，了解Ext Grid Panel的基本结构和配置。Grid Panel由多个列...
滚动条插件
05-13
5. **可配置选项**：开发者可以通过设置各种配置参数来控制滚动条的行为，如滚动速度、是否显示滚动框、鼠标滚轮滚动的灵敏度等。 6. **兼容性**：nicescroll 兼容多种浏览器，包括 Chrome、Firefox、Safari、Edge ...
42、element表格内容溢出自动往上滚动，鼠标移入停止滚动，溢出继续滚动
伦伦的博客
11-20 303
【代码】42、element表格内容溢出自动往上滚动，鼠标移入停止滚动，溢出继续滚动。
利用JS、CSS实现列表自动滑动滚动
zheshiyangyang的博客
04-05 3391
这几天在做，对于大屏有很多信息需要实时滚动，废了点力气学的明明白白的，特来记录供大家学习。
table表格初始化自动滚动和鼠标移入滚动两种方法
xiaoming4965的博客
05-25 964
table表格初始化自动滚动和鼠标移入滚动两种方法
js实现列表自动向上滚动，鼠标放上去后停止滚动且可手动滚动，鼠标移开后自动继续滚动。请举例代码
03-23
以下是一个简单的实现示例： HTML： ``` <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul> ``` CSS： ``` #list { height: 200px; overflow: hidden; } ``` JavaScript： ``` var list = document.getElementById('list'); var items = list.getElementsByTagName('li'); var timer; function scrollList() { var topItem = list.firstChild; list.removeChild(topItem); list.appendChild(topItem); } function startScroll() { timer = setInterval(scrollList, 2000); } function stopScroll() { clearInterval(timer); } list.onmouseover = stopScroll; list.onmouseout = startScroll; startScroll(); ``` 这个示例中，我们首先定义了一个包含10个列表项的无序列表。然后，我们使用CSS将列表的高度限制为200像素，并将溢出内容隐藏。接下来，我们使用JavaScript编写了三个函数： - `scrollList()`：将列表的第一个项移动到列表的末尾，从而实现向上滚动的效果。 - `startScroll()`：使用`setInterval()`函数启动一个定时器，每隔2秒钟调用`scrollList()`函数一次，从而实现自动滚动的效果。 - `stopScroll()`：使用`clearInterval()`函数停止定时器，从而实现鼠标悬停时停止滚动的效果。 最后，我们将`startScroll()`函数绑定到列表的`onmouseout`事件上，将`stopScroll()`函数绑定到列表的`onmouseover`事件上，从而实现鼠标移开后自动滚动，鼠标悬停后停止滚动的效果。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值