分享一个自己封装的数据无限滚动展示效果，鼠标移入暂停，移出继续

已于 2023-02-16 17:02:15 修改
阅读量360 收藏 6
点赞数 2
分类专栏： 滚动展示 无限滚动 无缝滚动 文章标签： vue.js javascript 前端
于 2023-02-16 16:58:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao970615/article/details/129065227
版权

效果

数据无缝滚动

关键方法

 // 内容超出滚动展示
    setRoll() {
      let parentRoll = document.getElementById("parentRoll"); //获取外层div，外层div必须设置样式overflow: hidden;
      let roll = document.getElementById("roll"); // 获取里面需要滚动展示的div
      let parentH = parentRoll.clientHeight; // 获取外层div的高
      let rollH = roll.clientHeight; // 获取里面需要滚动展示div的高
      let scrollTop = parentRoll.scrollTop; // 获取外层div的scrollTop值（被遮住的高度）
      let scrollTopMax = rollH - parentH; // 结算scrollTop的最大值
      if (rollH > parentH) { // 判断如果外层div展示不下当前内容，就滚动起来展示
        this.timer = setInterval(() => { // 定时器增加scrollTop的值，调节定时大小可以控制滚动速度（scrollTop定时增加大小也可以控速）
          scrollTop += 1; // 定时增加
          scrollTop >= scrollTopMax && (scrollTop = 0);  // 滚动到了最大值(滚到低了),重新滚动 ---（可以把你要展示的数据复制一份，这样就可以实现循环无缝滚动了）
          parentRoll.scrollTop = scrollTop;
        }, 50);
      }
    },

记得给最外层div绑定鼠标移入停止滚动，移出继续滚动效果

// 鼠标移入移出
    mouseenter() {
      clearInterval(this.timer);
      console.log("鼠标移入了");
    },
    mouseleave() {
      this.setRoll();
      console.log("鼠标移出了");
    },

完整代码如下

<template>
  <div class="tab">
    <div class="tab-top">
      <div class="title">这里是标题</div>
      <div class="box">
        <div class="box-left">
          <div class="box-left-title">设备总数</div>
          <div class="box-left-icon">
            <img src="@/assets/icons/icon-01.png" alt="" />
          </div>
          <div class="box-left-numb">9999</div>
        </div>
        <div class="box-right">
          <div class="box-right-title">设备总数</div>
          <div class="box-right-icon">
            <img src="@/assets/icons/icon-02.png" alt="" />
          </div>
          <div class="box-right-numb">9999</div>
        </div>
      </div>
    </div>
    <div class="tab-bottom">
      <div class="title">温湿度列表</div>
      <div class="box">
        <div class="box-top">
          <div>
            <div class="icon">
              <img src="@/assets/icons/温度.png" alt="" />
            </div>
            <div style="color: #ffce1a" class="describe">
              <div>{{hold.t}} ℃</div>
              <div>温度</div>
            </div>
          </div>
          <div>
            <div class="icon">
              <img src="@/assets/icons/湿度.png" alt="" />
            </div>
            <div class="describe">
              <div>{{hold.s}} %</div>
              <div>湿度</div>
            </div>
          </div>
        </div>
        <div class="box-bottom">
          <div class="head">
            <div v-for="(item, i) in tabData.head" :key="i">
              {{ item.name }}
            </div>
          </div>
          <div
            class="body"
            ref="roll"
            id="parentRoll"
            @mouseenter="mouseenter"
            @mouseleave="mouseleave"
          >
            <div ref="roll" id="roll">
              <div
                class="body-list"
                v-for="(list, i) in tabData.body"
                :key="i"
                :style="{
                  background: i % 2 === 1 ? 'rgba(16, 35, 103, 0.5)' : '',
                }"
                @click="clickLine(i)"
              >
                <div
                  v-for="(item, j) in tabData.head"
                  :key="j"
                  :style="{
                    background: list.flag ? '#1d327e' : '',
                    color: list.flag ? '#5fdef6' : '',
                  }"
                >
                  {{ list[item.key] }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  data() {
    return {
      tabData: {
        head: [
          { name: "实验名称", key: "a" },
          { name: "温度范围", key: "b" },
          { name: "湿度范围", key: "c" },
          { name: "时间", key: "d" },
        ],
        body: [
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "34",
            s: "53",
            flag: true,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "37",
            s: "78",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "35",
            s: "66",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "40",
            s: "55",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "38",
            s: "93",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "30",
            s: "88",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "30",
            s: "88",
            flag: false,
          },
           {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "37",
            s: "78",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "35",
            s: "66",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "40",
            s: "55",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "38",
            s: "93",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "30",
            s: "88",
            flag: false,
          },
          {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "30",
            s: "88",
            flag: false,
          },
        ],
      }, // 表数据
      timer: null, // 滚动定时器
      hold: {
            a: "aaa实验室",
            b: "30 - 45",
            c: "0%-100%",
            d: "2023-03-12",
            t: "34",
            s: "53",
            flag: true,
          }, // 暂存点击行的数据
    };
  },
  methods: {
    // 点击行
    clickLine(index) {
      this.tabData.body = this.tabData.body.map((item, i) => {
        if (i === index) {
          item.flag = true;
          this.hold = item
        } else {
          item.flag = false;
        }
        return item;
      });
    },
    // 内容超出滚动展示
    setRoll() {
      let parentRoll = document.getElementById("parentRoll"); //获取外层div，外层div必须设置样式overflow: hidden;
      let roll = document.getElementById("roll"); // 获取里面需要滚动展示的div
      let parentH = parentRoll.clientHeight; // 获取外层div的高
      let rollH = roll.clientHeight; // 获取里面需要滚动展示div的高
      let scrollTop = parentRoll.scrollTop; // 获取外层div的scrollTop值（被遮住的高度）
      let scrollTopMax = rollH - parentH; // 结算scrollTop的最大值
      if (rollH > parentH) { // 判断如果外层div展示不下当前内容，就滚动起来展示
        this.timer = setInterval(() => { // 定时器增加scrollTop的值，调节定时大小可以控制滚动速度（scrollTop定时增加大小也可以控速）
          scrollTop += 1; // 定时增加
          scrollTop >= scrollTopMax && (scrollTop = 0);  // 滚动到了最大值(滚到低了),重新滚动 ---（可以把你要展示的数据复制一份，这样就可以实现循环无缝滚动了）
          parentRoll.scrollTop = scrollTop;
        }, 50);
      }
    },
    // 鼠标移入移出
    mouseenter() {
      clearInterval(this.timer);
      console.log("鼠标移入了");
    },
    mouseleave() {
      this.setRoll();
      console.log("鼠标移出了");
    },
    // 视口变化了，要重新执行滚动方法
    outSize() {
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.roll, () => {
        this.timer && clearInterval(this.timer);
        this.setRoll();
      });
    },
  },
  mounted() {
    this.outSize();
  },
  computed: {
   
  },
  destroyed() {},
};
</script>

<style lang='scss' scoped>
.tab {
  font-size: 0.18rem;
  height: 100%;
  &-top {
    height: 30%;
    .title {
      height: 0.45rem;
      display: flex;
      align-items: center;
      font-size: 0.2rem;
      font-weight: 500;
      background-color: #1d327e;
      color: #5fdef6;
    }
    .box {
      height: calc(100% - 0.45rem);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      &-left {
        padding: 0.1rem;
        width: 40%;
        height: 95%;
        color: #b5b915;
        font-weight: bold;
        background-image: url("@/assets/icons/iconBj1.png");
        background-size: 100% 100%;
        &-title {
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &-icon {
          height: 40%;
          display: flex;
          justify-content: center;
          align-items: center;
          & > img {
            height: 100%;
          }
        }
        &-numb {
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      &-right {
        padding: 0.1rem;
        color: #1fee3c;
        font-weight: bold;
        width: 40%;
        height: 95%;
        background-image: url("@/assets/icons/iconBj1.png");
        background-size: 100% 100%;
        &-title {
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &-icon {
          height: 40%;
          display: flex;
          justify-content: center;
          align-items: center;
          & > img {
            height: 100%;
          }
        }
        &-numb {
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  &-bottom {
    height: 70%;
    .title {
      height: 0.45rem;
      display: flex;
      align-items: center;
      font-size: 0.2rem;
      font-weight: 500;
      background-color: #1d327e;
      color: #5fdef6;
    }
    .box {
      height: calc(100% - 0.45rem);
      &-top {
        height: 25%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        & > div {
          width: 45%;
          height: 90%;
          color: #37e2f4;
          padding: 0 0.2rem;
          background-image: url("@/assets/icons/iconBj2.png");
          background-size: 100% 100%;
          display: flex;
          .icon {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            & > img {
              width: 40%;
            }
          }
          .describe {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
        }
      }
      &-bottom {
        height: 75%;
        padding-top: 0.08rem;
        .head {
          display: flex;
          color: #5fdef6;
          height: 0.45rem;
          background-color: #1d327e;
          & > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .body {
          cursor: pointer;
          overflow: hidden;
          height: calc(100% - 0.45rem);
          color: #9aa2c8;
          font-size: 0.16rem;
          &-list {
            height: 0.4rem;
            display: flex;
            & > div {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
</style>

，可复制粘贴看效果

Wild～～
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS简单封装的图片无缝滚动效果示例【测试可用】
10-20
主要介绍了JS简单封装的图片无缝滚动效果,结合完整实例形式分析了javascript针对图片无缝滚动功能实现的具体操作技巧,包括鼠标事件响应、事件函数及页面元素属性动态变换等相关操作技巧,需要的朋友可以参考下
vue和iview实现Scroll 数据无限滚动功能
01-19
在做项目的时候因为数据比较多，一次性全部渲染的话会花费较多的时间，所以，想到每一次渲染10条数据 也想过每一次获取十条数据然后显示就行了，就目前自己所知最好的方法是修改接口，一次返回10条，可是这样子太麻烦了，所以决定一次性请求所有数据，然后每次渲染十条，需要再上拉加载更多 使用的是iview中的组件Scroll 以下是获取数据和封装数据的方法： 原理是先定义两个全局的变量，一个存储全部的数据，一个存储渲染的数据 在首次获得数据的时候，往渲染的变量中存入全部数据的前十条： 然后在数据最底时上拉加载新的十条数据： 其中几个问题都解决了： 1. 当数据小于十条时，如何显示 2. 当数据渲染完
页面滚动 鼠标移动上去暂停 移开滚动(亲测有用）
xue_tingting的博客
02-27 165
【代码】页面滚动 鼠标移动上去暂停 移开滚动(亲测有用）
原生js封装自定义滚动条
12-11
最近有一个关于制作在线音乐播放器的项目，需要使用一个滚动条，但是自带滚动条实在是太丑了，所以就自己琢磨了一下自定义的滚动条。 在网上看原理，说实话没怎么看懂，就趁今天上午上安卓的时候，研究了一下，结果还算是满意吧。然后就包装一个对象。 使用方法很简单，就是自定义一个div，将这个对象导入做参数，new一下就可以。也可以自己定义滚动条的样式，只要自己修改一下样式表就可以 效果图： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
12-07
建议在Chrom,Firefox,Opera,Safari等标准浏览器中查看. Ie下没有阴影及圆角.实现了根据源数据(样例中是一个JSON数据组)总条数, 均分出时间点以平滑向右动画方式显示在时间线上, 当鼠标划过时间点时, 显示对应的日期及标题. 鼠标划过事件, 充分考虑了用户体验, 当用户快速(无意识移动)从时间点上划过时, 并不触发相应事件. 相关的方法说明及使用, 请参见下面的注释或发评论, 同时也欢迎大家找bug并提交. Js核心代码点此查看样例 代码如下: var JSONData=[{…},{…},…];//数据源,一切皆因它而生,因它而灭 function iTimePoi
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
wangshfa的专栏
03-27 5322
需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示，离开后，继续滚动，具体实现如下，喜欢的朋友可以参考下 需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。  效果图：    上干货  html：  复制代码代码如下:     aaaaaaaaa
vue消息滚动 鼠标移入停止滚动，鼠标移开继续滚动
weixin_44578496的博客
08-23 1666
vue无缝滚动效果,直接上代码so easy <div id="box"> <ul id="con1" ref="con1" :class="{anim:animate==true}" @mouseenter="Stop()" @mouseleave="Up()"> <li v-for='item in items'>{{item.name}}</li> </ul&g.
可视化大屏表格数据滚动的几种实现方案
最新发布
IO14122的博客
02-28 1323
本文主要介绍可视化大屏中实现表格数据无缝滚动的几种方案，实现原理、实现方案、具体代码等。不同方案供大家参考，还有常用的第三方滚动插件推荐。
vue 实现列表自动轮播，并且鼠标移入停止列表，移出继续滚动
CSSAJBQ_的博客
07-08 2848
直接上代码，
css中，鼠标移入时让动画animation停止，但是移出后需要从停止的地方开始
qq_32094783的博客
09-24 5079
在hover中加入如下代码: a:hover{ animation-play-state:'paused' }
JavaScript 封装一个tab效果源码分享
10-23
本文给大家分享javascript封装一个tab效果源码分享，感兴趣的朋友一起来看看吧
微信小程序 数据封装，参数传值等经验分享
08-31
主要介绍了微信小程序 数据封装，参数传值等经验分享的相关资料,需要的朋友可以参考下
原生JS实现循环滚动，鼠标移动暂停
weixin_43820434的博客
08-17 515
【代码】原生JS实现循环滚动，鼠标移动暂停。
js实现表格自动滚动，鼠标放上去后停止滚动且可手动滚动
m0_50441807的博客
05-25 4961
scrollTop可以控制滚动的距离，可以设置一个永久定时器setInterval，每次执行定时器让scrollTop++，即可达到滚动的效果； 下面先理解js的几个属性：scrollHeight，offsetHeight，scrollTop，clientHeight
vue3横向自动来回滚动，鼠标移入暂停移出继续
zjh_hhh的博客
07-31 790
【代码】vue3横向自动来回滚动，鼠标移入暂停移出继续。
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
qq_44162778的博客
08-08 2291
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
一个非常好用的文字滚动的案例，鼠标悬浮可暂停
weixin_33766168的博客
11-17 424
网上找了很多，万变不离其宗，写法核心都是一样的，在这里我给大家总结一下，可收藏备用。html:<divclass="scroll"> <ulclass="list"> <li><ahref="#"target="_blank">公告一或中奖者甲</a></li> ...
div自动滑动，鼠标移上停止滑动
qq_35606790的博客
06-14 1964
这是在做个人站的时候展示项目成果，因为不光需要展示，还需要介绍详细内容，就在滚动展示的地方做了这个效果以便于点开想要看的项目。 首先，要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例，那个是一块块的的滚动==>实现图片的循环滚动. 这次我们就做滚动区域是平滑循环滚动效果。 下边是布局的HTML代码，原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示...
vue封装一个鼠标移入移出改变颜色的函数
04-26
当然，我理解并遵守您的要求。以下是使用Vue封装一个鼠标移入移出改变颜色的函数的代码示例： 在Vue组件中，使用v-bind指令设置绑定颜色变量styleColor，并创建鼠标移入、移出事件的处理函数hoverHandler： ``` <template> <div v-bind:style="{ background: styleColor }" v-on:mouseover="hoverHandler(true)" v-on:mouseleave="hoverHandler(false)"> 鼠标移入/移出改变背景颜色 </div> </template> <script> export default { data() { return { styleColor: "white" }; }, methods: { hoverHandler(isHovered) { this.styleColor = isHovered ? "blue" : "white"; } } }; </script> ``` 当鼠标进入/离开div元素时，将styleColor变量修改为指定的颜色。这样可以通过v-bind指令将styleColor变量与元素的background样式属性绑定，实现鼠标移入移出改变颜色的效果。 希望这个代码示例对您有所帮助，如有疑问，请随时与我联系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值