1.新建一个test.html文件

要求在html中创建两个div，同等固定高度的，并随意填充任意的text,p div等大量超出div的高度。

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>原生滚动方式</title>
</head>
<body><div id="app"><div class="scroll-left" id="left"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><div class="scroll-right" id="right"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</div>
</body><script>
//左div绑定滚动事件let left=document.getElementById('left');let right=document.getElementById("right");left.onscroll=(e)=>{console.log("滚动事件",e.target.scrollTop);   //scrollTop即为元素滚动的高度’‘console.log("打印此时右边的滚动高度",right.scrollTop);//同步，即吧左边的scrollTop赋值给右边的scrollTop/******* !!!!!!!!!!!!!!!!!!!!!!!!******/right.scrollTop=e.target.scrollTop;}
</script><style scoped>#app{display: flex;}.scroll-left,.scroll-right{width:40%;height:600px;}.scroll-left{background-color: antiquewhite;overflow: auto;}.scroll-right{background-color: #c3faff;overflow: auto;}.item{height:200px;width:90%;margin-bottom: 50px;}.scroll-left .item{background-color: brown;}.scroll-right .item{background-color: coral;}
</style>
</html>

从代码上，我只是把左右两边的滚动条打开overflow为auto,接着在js中对左边的div绑定scroll事件，事件中把左侧的垂直滚动的距离scrollTop直接给右侧的垂直滚动距离,而右侧不绑定任何事件，这样，滚动右侧的滚动条可实现右侧的同步，而右侧的滚动对左侧没有任何的影响

3.vue.js的设计方案

明确了原生的js实现方式，我们来用vue.js复现并美化一下。

vue.js初步了解

vuescroll 美化滚动条

思路是一样的，唯一不同的是采用vuescroll的回调函数来控制。

请查看handle-scroll事件和scrollTo API

参考代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue 双开div同步滚动测试</title>
</head><body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/vuescroll"></script><div id="app"><vue-scroll :ops="left" class="left-scroll" @handle-scroll="leftScroll" ref="v-left"><div class="left" ref="left"><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div></div></vue-scroll class="right-scroll" @handle-scroll="rightScroll" ref="v-right"><vue-scroll><div class="right" ref="right"><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div><div class="item-block"></div></div></vue-scroll></div>
</body><script>const vs=new Vue();const vm = new Vue({el: '#app',data() {return {msg: 'hello world!',//left是左侧的vuescroll参数left:{vuescroll: {mode:'native',//locking:true},scrollPanel: {speed:400,//scrollingX:false,//scrollingY:truescrollingX:false},rail: {keepShow:true,opacity:0.7,background:'rgb(229, 229, 229)'},bar: {keepShow:true}},leftCH:0}},created() {},//注意 refs在挂载后才生效，故下面的代码放在mounted中mounted() {let rightScrollTop = this.$refs["right"].scrollToplet that = this;  //因为下面函数的this不再指向此vue实例this.$refs["left"].onscroll = function (e) {// console.log(this.scrollTop)that.$refs["right"].scrollTop = this.scrollTop//console.log(that.$refs["right"].scrollTop)}vs.$on("left-change",(e,arg)=>{//console.log("事件监听器",e,that.$children[1])});},methods:{//vuecroll的回调函数，实现同步leftScroll(vertical,horizontal,nativeEvent){//console.log(vertital,horizontal,nativeEvent)  全部打印//console.log(vertital)  //部分打印，高度变化// console.log(this.$refs['v-right'])//打印得到undefinedlet that=this;let change=vertical.scrollTop-this.leftCH;this.leftCH=vertical.scrollTop;console.log(change)this.$children[1].scrollTo({y:vertical.scrollTop},0)vs.$emit("left-change",vertical.scrollTop)},rightScroll(vertital,horizontal,nativeEvent){}},});
</script><style scoped>#app {height: 550px;/* overflow: hidden;*/}#app {display: flex;}.left,.right {height: fit-content;}.left {/*width: 40%;*/background-color: aquamarine;/*overflow: auto;*/}.right {/*width: 40%;*/background-color: red;/*overflow: auto;*/}.left .item-block {height: 300px;width: 80%;background-color: yellow;margin-top: 20px;}.right .item-block {height: 300px;width: 80%;background-color: rgb(0, 225, 255);margin-top: 20px}.left-scroll .__rail-is-horizontal{display: none!important;}
</style></html>

关键部分已经写好注释了，具体的API方法和回调懒得说,说明自行参看附上的链接。

如有问题欢迎下方留言或者邮箱联系zero@zerotower.xyz

Good Bye ~

div同步滚动的方式相关推荐

js解析lrc 实现lrc歌词同步滚动效果
这两天想着做一个h5的网页播放器,实现歌词同步滚动但是上网找了很多资料,竟发现没有比较完善的代码供参考,但是无意间看到了百度的千千音乐有这样的效果,就想着一定能通过js实现经过两三天的努力,终于做 ...
java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
div自动滚动_从手机滚动丢帧问题，学习浏览器合成与渲染层优化
一个 CSS 属性引发的血案 Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 "柔顺丝滑",要讨论起 ...
html 多层滚动,如何实现多个div同时滚动（3个以上）
问题描述有5个宽度相同的div纵向排列,都会有内容横向溢出.想要实现不论在某一div进行拖动,都能使得其他div能同步滚动. 尝试以及问题有尝试过如下方法将div1的scrollLeft值与div ...
markdown 编辑器实现双屏同步滚动
由于一直在使用 markdown 编辑器写技术文章,所以对于编写体验很敏感.我发现各大社区的 markdown 编辑器基本都有同步滚动功能.只不过有些做得好,有些做得马马虎虎.出于好奇,我就打算自己亲 ...
项目场景-------滚动条横向竖向同步滚动
项目场景之滚动条横向竖向同步滚动 1. 项目场景: 提示:项目上有个自动化数据比对工具需要在视图进行滚动条双向监听滚动: 2. 属性描述: 提示:涉及到几个属性值需要了解: // 垂直滚动条// sc ...
我的Android进阶之旅------Android自定义View来实现解析lrc歌词并同步滚动、上下拖动、缩放歌词的功能...
前言一LRC歌词文件简介 1什么是LRC歌词文件 2LRC歌词文件的格式 LRC歌词文件的标签类型 1标识标签 2时间标签二解析LRC歌词 1读取出歌词文件 2解析得到的歌词内容 1表示每行歌词内 ...
div:给div加滚动栏　div的滚动栏设置
今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;" ...
文件共享同步5种方式：NFS、NAS、rsync、scp、ftp
谈到文件同步,我们最直接的同步方式是采用rsync的同步软件,rsync同步可以保持server和client的强一致(server中的增删改都会同步client),但在实际场景中rsync可能并不能 ...

div同步滚动的方式

1.新建一个test.html文件

2.需求分析

div同步滚动的方式相关推荐

最新文章

热门文章