文字溢出自动向上循环滚动_vue3 溢出自动滚动

作者：不正经 | 2024-06-10 21:40:54

踩

vue3 溢出自动滚动

1 效果展示

在这里插入图片描述

2 代码

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap{
      padding: 20px;
      background-color: pink;
    }
    .box{
      max-height: 40px;
      overflow-y: hidden;
      line-height: 20px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box">
      <p class="content">Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。</p>
    </div>
  </div>
  <script>
    const box = document.querySelector('.box')
    const content = document.querySelector('.content')
    console.log(box.clientHeight, content.offsetHeight)
    if(content.offsetHeight > box.clientHeight) {
      // 拷贝追加一份子节点，撑开内容高度，使一份内容可以完全滚完
      const content2 = document.createElement('p')
      content2.innerHTML = content.innerHTML
      box.appendChild(content2)
      setInterval(() => {
        // 滚完一份内容的高度后，重置滚动位移
        if(box.scrollTop >= content.offsetHeight){
          box.scrollTop -= content.offsetHeight
        }else {
          // 自行滚动
          box.scrollTop++
        }
      }, 200)
    }
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/700461

文字溢出自动向上循环滚动_vue3 溢出 自动滚动

1 效果展示

2 代码

文字溢出自动向上循环滚动_vue3 溢出自动滚动