Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍"JavaScript怎么实现页面无缝滚动效果"，在日常操作中，相信很多人在JavaScript怎么实现页面无缝滚动效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"JavaScript怎么实现页面无缝滚动效果"的疑惑有所帮助!接下来，请跟着小编一起来学习吧!

1、js+transform

使用定时器动态增加大小，再把值赋给 transform，实现位置偏移，来实现无缝滚动。

html

一定要循环两遍数据，这样的话，会出现两个一样的数据，在一个数据消失后，不会使页面空白，而这时transform归0，有从头开始，因为两个数据相同，归0后视觉上就像无缝滚动。

{{item.fxsj}}

{{item.gjbh}}

{{item.pzgs}}个

详情

{{item.fxsj}}

{{item.gjbh}}

{{item.pzgs}}个

详情

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)

// 别忘了定时器清除

this.$once('hook:beforeDestroy',()=>{

clearInterval(this.timer);

this.timer = null;

})

},

methods:{

// 鼠标触碰停止

moveStar(){

clearInterval(this.timer);

this.timer2 = null;

},

// 鼠标离开始

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、引入组件

在某些时候实际页面渲染后会出现点击事件失效的情况。这个问题是因为vue-seamless-scroll是用重复渲染一遍内部元素来实现滚动的，而JS的onclick只检测页面渲染时的DOM元素。记得在入门原生JS的时候也经常会遇见这个问题，经过一般百度，采用事件委托的方式解决。

在section上绑定事件handleClick，捕获点击的DOM节点。事件中需求的数据可以直接用data绑在相应的dom上。

{{ item.range }}

{{ item.wflx }}

{{ item.sbsj }}

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, //the larger the value, the faster the scroll speed

limitMoveNum: 2, //Start seamless scrolling of data volume this.dataList.length

hoverStop: true, //whether to enable mouse hover stop

direction: 1, // 0 Down 1 Up 2 Left 3 Right

openWatch: true, //Turn on real-time data monitoring refresh dom/

};

},

},

methods: {

handleClick(item) {

let message = JSON.parse(item.target.dataset.obj);

this.$ emit("jump", message);

},

}

},

};```

At this point, the study of "how JavaScript achieves seamless page scrolling effect" is over, hoping to solve everyone's doubts. Theory and practice can better match to help you learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.