JavaScript怎么實(shí)現(xiàn)頁面無縫滾動(dòng)效果

這篇文章主要介紹“JavaScript怎么實(shí)現(xiàn)頁面無縫滾動(dòng)效果”，在日常操作中，相信很多人在JavaScript怎么實(shí)現(xiàn)頁面無縫滾動(dòng)效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript怎么實(shí)現(xiàn)頁面無縫滾動(dòng)效果”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

1、js+transform
使用定時(shí)器動(dòng)態(tài)增加大小，再把值賦給 transform，實(shí)現(xiàn)位置偏移，來實(shí)現(xiàn)無縫滾動(dòng)。

html
一定要循環(huán)兩遍數(shù)據(jù)，這樣的話，會(huì)出現(xiàn)兩個(gè)一樣的數(shù)據(jù)，在一個(gè)數(shù)據(jù)消失后，不會(huì)使頁面空白，而這時(shí)transform歸0，有從頭開始，因?yàn)閮蓚€(gè)數(shù)據(jù)相同，歸0后視覺上就像無縫滾動(dòng)。

 <div style="height: 100%" @mouseenter="moveStar()" @mouseleave="moveLeave()">
      <table id="rollOne" border="1" :style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}">
        <tr v-for="item in tableData" :key="item.index">
          <td width="25%">{{item.fxsj}}</td>
          <td width="15%">{{item.gjbh}}</td>
          <td width="35%">{{item.pzgs}}個(gè)</td>
          <td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>詳情</span></td>
        </tr>
      </table>
      <table border="1" :style="{transform:'translate(0px,'+flvPlayerTimer+'px)'}">
        <tr v-for="item in tableData" :key="item.index">
          <td width="25%">{{item.fxsj}}</td>
          <td width="15%">{{item.gjbh}}</td>
          <td width="35%">{{item.pzgs}}個(gè)</td>
          <td width="25%" style="cursor: pointer" @click="popu(2,item)"><span>詳情</span></td>
        </tr>
      </table>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
js

        export default {
        name: "rolling",
        data() {
          return {
            flvPlayerTimer:0,
            timer:null
          }
        },
        props: {
          tableData: {
            type: Array
          },
        },
        mounted(){
          this.timer = setInterval(()=>{
            this.flvPlayerTimer-=1
            if(this.flvPlayerTimer== -($('#rollOne').height())){
              this.flvPlayerTimer =0
            }
          },100)
          // 別忘了定時(shí)器清除
          this.$once('hook:beforeDestroy',()=>{
            clearInterval(this.timer);
            this.timer = null;
          })
        },
        methods:{
         // 鼠標(biāo)觸碰停止
          moveStar(){
            clearInterval(this.timer);
            this.timer2 = null;
          },
          // 鼠標(biāo)離開始
          moveLeave(){
            this.timer = setInterval(()=>{
              this.flvPlayerTimer-=1
              if(this.flvPlayerTimer== -($('#rollOne').height())){
                this.flvPlayerTimer =0
              }
            },100)
          },
        }
    }
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
css

.fxlx{
    height: 16vh;
    width: 100%;
    table,table tr td {
      border:1px solid   rgba(41,143,229,0.3);
    }
    table{
      width: 90%;
      margin: 0 auto;
      th{
        opacity: 0.7;
        background: linear-gradient(rgba(53,123,203,0.7), rgba(9,57,113,0.7));
        font-size: 9rem;
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        color: #ffffff;
        height: 28rem;
      }
      td{
        opacity: 0.8;
        font-size: 9rem;
        height: 30rem;
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        color: #ffffff;
        background:#001c38
      }
    }
  }
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
2、使用vue-seamless-scroll插件
1、安裝vue-seamless-scroll

npm install vue-seamless-scroll --save　
1
2、引入組件
在某些時(shí)候?qū)嶋H頁面渲染后會(huì)出現(xiàn)點(diǎn)擊事件失效的情況。這個(gè)問題是因?yàn)関ue-seamless-scroll是用重復(fù)渲染一遍內(nèi)部元素來實(shí)現(xiàn)滾動(dòng)的，而JS的onclick只檢測頁面渲染時(shí)的DOM元素。記得在入門原生JS的時(shí)候也經(jīng)常會(huì)遇見這個(gè)問題，經(jīng)過一般百度，采用事件委托的方式解決。
在section上綁定事件handleClick，捕獲點(diǎn)擊的DOM節(jié)點(diǎn)。事件中需求的數(shù)據(jù)可以直接用data綁在相應(yīng)的dom上。

<div class="my-inbox" @click.stop="handleClick($event)">
      <vue-seamless-scroll :data="sendVal.body" :class-option="defaultOption">
        <!--        <div v-for="(item, index) in sendVal" :key="index" @click="jump(item)">-->
        <!--          <div class="wfjl1" v-show="index % 2 == 0">{{ item }}</div>-->
        <!--          <div class="wfjl2" v-show="index % 2 == 1">{{ item }}</div>-->
        <!--        </div>-->
        <table ref="movebox">
          <tr v-for="(item, index) in sendVal.body" :key="index">
            <td
              :data-obj="JSON.stringify(item)"
              :id="'xzq' + index"
              width="15%"
            >
              {{ item.range }}
            </td>
            <td
              :data-obj="JSON.stringify(item)"
              :id="'wflx' + index"
              width="20%"
            >
              {{ item.wflx }}
            </td>
            <td :data-obj="JSON.stringify(item)" :id="'sj' + index" width="25%">
              {{ item.sbsj }}
            </td>
            <td :data-obj="JSON.stringify(item)" :id="'zt' + index" width="20%">
              <img
                style="width: 71rem; height: 34rem; margin: 5rem 0"
                :src="item.image_result"
              />
            </td>
          </tr>
        </table>
      </vue-seamless-scroll>
    </div>
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
js

import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "my-marquee-top",
  props: {
    sendVal: Object,
  },
  data() {
    return {
      isShow: true,
      time: "",
      url: "",
    };
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 數(shù)值越大速度滾動(dòng)越快
        limitMoveNum: 2, // 開始無縫滾動(dòng)的數(shù)據(jù)量 this.dataList.length
        hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom/
      };
    },
  },
  methods: {
    handleClick(item) {
      let message = JSON.parse(item.target.dataset.obj);
      this.$emit("jump", message);
    },
  }
  },
};```

到此，關(guān)于“JavaScript怎么實(shí)現(xiàn)頁面無縫滾動(dòng)效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！