两个盒子同步滚动

最新推荐文章于 2024-05-30 09:41:02 发布
最新推荐文章于 2024-05-30 09:41:02 发布
阅读量979 收藏 3
点赞数
文章标签： js css html javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/vvvvvv333333333/article/details/116449582
版权
本文介绍了如何实现两个盒子按比例同步滚动，关键在于计算滚动比例并监听滚动事件。比例计算公式为：(左边滚动内容高度 - 左边容器高度) / (右边滚动内容高度 - 右边容器高度)。在滚动事件触发时，通过 scrollTop 属性更新另一个容器的 scrollTop 值。文章提供详细代码和逻辑注释。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天想简单的说一下，两个盒子同步滚动的思路---按比例滚动

  1. 最重要的需要知道比例是如何计算的？   比例  = （左边滚动内容元素的高度 - 左边容器的高度）/ （右边滚动内容元素的高度 - 右边边容器的高度）​​​​​​​ ​​​​​​​

  2. 我们需要知道滚动内容元素的高度是如何计算的 ？滚动内容元素的高度  = 找到滚动元素的scrollHeight 属性

  3. 我们需要知道容器的高度是如何计算的 ？ 容器的高度 = 找到容器的offsetHeight

  插入提示：offsetHeight 和 clientHeight 区别 

  • clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度
  • offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。

    4. 我们知道比例之后，就可以通过监听滚动事件 ，在某一个滚动事件触发的时候，通过scrollTop，来确定另外容器的scrollTop值，即可实现同步滚动的效果

  插入提示：scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度

  例如左边容器滚动，可以获取左边容器的scrollTop 如 左边容器.scrollTop

  右边容器.scrollTop = 左边容器.scrollTop  * 比例

 

******上干货，详细的看代码，逻辑都有注释的希望可以帮到你！！！！

 

一、页面布局

<div id="content">
    <div id='left'>
       <div id='leftChild'>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
       </div>
    </div>
    <div id='right'>
      <div id='rightChild'>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
      </div>
    </div>
  </div>

二、简单样式

<style>
    #content * {
      box-sizing: border-box;
    }
    #content{
      display: block;
      height: 200px;
      width:1000px;
      overflow: hidden;
    }
    #content #left{
      float: left;
      width: 50%;
      height: 100%;
      border: 1px solid #ccc;
      overflow: auto;
    }
    #content #left #leftChild{
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    
    #content #right{
      float: left;
      width:50%;
      height: 100%;
      border: 1px solid #ccc;
      overflow: auto
    }
    #content #right #rightChild {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  </style>

 

三、JS 逻辑

<script>
    var leftContent = document.querySelector('#left')
    var leftChildContent = document.querySelector('#leftChild')
    var rightContent =  document.querySelector('#right')
    var rightChildContent = document.querySelector('#rightChild')
    // 左边盒子的高度
    var leftContentHeight = leftContent.offsetHeight
    console.log(leftContentHeight)
    // 左边内容的高度
    var leftChildHeight = leftChildContent.scrollHeight
    console.log(leftChildHeight)
    // 右边盒子的高度
    var rightContentHeight = rightContent.offsetHeight
    console.log(rightContentHeight)
    // 右边内容的高度
    var rightChildHeight = rightChildContent.scrollHeight
    console.log(rightChildHeight)
    // 得出滚动比例
    var scale = (leftChildHeight - leftContentHeight)/ (rightChildHeight-rightContentHeight)
    // 监听左边元素的滚动事件
    leftChildContent.addEventListener('scroll', function(){
        scale = (leftChildHeight - leftContentHeight)/ (rightChildHeight-rightContentHeight)
        rightChildContent.scrollTop = leftChildContent.scrollTop * scale
    })
    // 监听左边元素的滚动事件
    rightChildContent.addEventListener('scroll', function(){
        scale = (leftChildHeight - leftContentHeight)/ (rightChildHeight-rightContentHeight)
        leftChildContent.scrollTop = rightChildContent.scrollTop * scale
    })
      
  </script>

四 、完整代码

<html>
<head>
  <meta charset="utf-8"/>
  <title>两个盒子同步滚动</title>
  <style>
    #content * {
      box-sizing: border-box;
    }
    #content{
      display: block;
      height: 200px;
      width:1000px;
      overflow: hidden;
    }
    #content #left{
      float: left;
      width: 50%;
      height: 100%;
      border: 1px solid #ccc;
      overflow: auto;
    }
    #content #left #leftChild{
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    
    #content #right{
      float: left;
      width:50%;
      height: 100%;
      border: 1px solid #ccc;
      overflow: auto
    }
    #content #right #rightChild {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="content">
    <div id='left'>
       <div id='leftChild'>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
        <div>我是左边</div>
       </div>
    </div>
    <div id='right'>
      <div id='rightChild'>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
        <div>我是右边</div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    var leftContent = document.querySelector('#left')
    var leftChildContent = document.querySelector('#leftChild')
    var rightContent =  document.querySelector('#right')
    var rightChildContent = document.querySelector('#rightChild')
    // 左边盒子的高度
    var leftContentHeight = leftContent.offsetHeight
    console.log(leftContentHeight)
    // 左边内容的高度
    var leftChildHeight = leftChildContent.scrollHeight
    console.log(leftChildHeight)
    // 右边盒子的高度
    var rightContentHeight = rightContent.offsetHeight
    console.log(rightContentHeight)
    // 右边内容的高度
    var rightChildHeight = rightChildContent.scrollHeight
    console.log(rightChildHeight)
    // 得出滚动比例
    var scale = (leftChildHeight - leftContentHeight)/ (rightChildHeight-rightContentHeight)
    // 监听左边元素的滚动事件
    leftChildContent.addEventListener('scroll', function(){
        scale = (leftChildHeight - leftContentHeight)/ (rightChildHeight-rightContentHeight)
        rightChildContent.scrollTop = leftChildContent.scrollTop * scale
    })
    // 监听左边元素的滚动事件
    rightChildContent.addEventListener('scroll', function(){
        scale = (leftChildHeight - leftContentHeight)/ (rightChildHeight-rightContentHeight)
        leftChildContent.scrollTop = rightChildContent.scrollTop * scale
    })
      
  </script>
</body>
</html>

 

 

 

 

 

前端实现两个盒子同步滚动
a253399414的博客
08-08 1514
最近在工作中有一个版本对比的需求，左右两边的展示不同的版本，在滚动左边版本的时候右边版本也随之滚动。当时做的时候准备打算用一个大盒子包括这两个盒子，滚动的时候滚动最外面的大盒子，后来因为组长规划的是两个版本用一个组件，传一个叫做position的props，再传不同版本的数据就可以。后来考虑了一下，在我的知识范围里面如果不能用盒子包括，就只能用事件监听加上操纵dom了。下面是我的实现方法。 import React, {Component} from 'react'; import './Test.css
原生JS控制多个滚动条同步跟随滚动
热门推荐
Quiet-Night的博客
12-21 1万+
原生JS控制多个滚动条同步跟随滚动
同步滚动条滚动
weixin_45152566的博客
11-17 139
<div id="div1" style="width:500px; overflow:scroll;" onscroll="document.getElementById('div2').scrollLeft = this.scrollLeft;"> <div style="width:800px; height:50px;"></div> </div> <div id="div2" style="width:500px; overflow:
div同步滚动
leixilong的专栏
11-14 594
1321321312321111111111111111111111111111111111132132131232111111111111111111111111111111111113213213123211111111111111111111111111111111111321321312321111111111111111111111111111111111
推荐开源库：Syncscroll - 同步滚动解决方案
最新发布
gitblog_00082的博客
05-30 462
推荐开源库：Syncscroll - 同步滚动解决方案 syncscrollscroll two or more areas simultaneously项目地址:https://gitcode.com/gh_mirrors/sy/syncscroll 1、项目介绍 同步滚动（Syncscroll）是一个轻量级的JavaScript库，只有946字节的压缩大小，完全无需依赖。它的核心功能是让两个...
div同步滚动js
xuelang532777032的博客
06-03 891
无标题文档 111111111111111111111111111111111111111111111111111111dsdsdsddadasd23232323232222222222222222222222222222222222222 1234564d65sds5dad起嗯无群二wq9e8eqw89e789we89qwe98wq74e9q8we89wq98
原生JS控制多个滚动条同步跟随滚动效果
10-18
在网页设计与开发中，实现两个或多个滚动条同步滚动是一种常见的用户交互需求，尤其在涉及代码编辑器、文档预览、聊天界面等场景时。本文将详细介绍使用原生JavaScript实现多个滚动条同步跟随滚动效果的方法和原理。...
vue 函数返回两个值_Vue 开发经验小记（持续更新）
weixin_39983384的博客
12-20 1834
使用 vue 开发过程中遇到的问题或知识点总结，持续更新中…最近更新：2019-11-291.国际化国际化插件：vue-i18n2.强制换行与禁止换行让多行内容显示一行，多余的用...表示white-space : nowrapoverflow: hiddentext-overflow : ellipsis复制代码内容超过宽度时强制换行overflow: hidden;word-wrap:brea...
html实现自动滚动,js实现滚动条自动滚动
weixin_42337065的博客
05-30 2551
本文实例为大家分享了js实现滚动条自动滚动的具体代码，供大家参考，具体内容如下效果类似于直播网站的评论，会一条接着一条向上 go out ；js部分很简单：通过控制scrolltop的值来实现自动滚动效果；很重要两点：1、scrolltop的值不可以加单位，谨记！2、网页缩放比例会影响效果实现(下面具体说)；scrolltop需要注意的三点：1、如果这个元素没有被溢出，scrolltop为0；2、...
tkinter实现一个滚动条同时控制两个部件
u014297638的博客
04-01 1945
tkinter实现一个滚动条同时控制两个部件 import tkinter as tk def Wheel(event):#鼠标滚轮动作 print(str(-1*(event.delta/120)))#windows系统需要除以120 text2.yview_scroll(int(-1*(event.delta/120)), "units") text1.yview_...
Jquery使两个Div的滚动条同步滚动
weixin_33860553的博客
03-03 1573
$("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 $("#div1").scrollLeft($(this).scrollLeft()); // 横向滚动条 }); $("#div1").scroll(function(...
CSS 实现无缝滚动
qq_33003143的博客
12-10 1020
CSS实现无缝滚动
CSS常用知识点：盒子内容设置滚动方向
qq_41444226的博客
07-07 1222
<!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>盒子内
给盒子设置滚动
Mia的博客
03-26 2880
在网上查了各种教程，都不可行，最后偶然尝试发现，原来给父盒子设置overflow:scroll竟然就可以了。嗯，真是神奇。 <div class="body-head" :style="curHeight"> <test> <transition-group tag="ul" class='slide-ul' name="list"> <templ
CSS 实现隐藏滚动条同时又可以滚动内容
weixin_34185512的博客
05-24 149
<div class="outer_div"> <div class="inner_div"> <div>我是内容</div> </div> </div> 复制代码.outer_div { position: relative; overflow: hidden; width: 200px;...
无限长滚动列表（虚拟列表）的实现
ZegTsai's blogs
03-04 2107
无限长滚动列表（虚拟列表）的实现 原理：监听容器滚动，根据滚动距离生成对应列表，再利用绝对定位，将列表展示到容器的对应位置。 1、预先处理容器样式与生成数据 容器列表的最大高度为500px，列表项（li）的高度定为50px，即容器只展示10条数据。 <style> ul.container { position: relative; width:500px; max-height: 500px; /* 限定容器展示区域的大小 */
如何让页面中的两个元素同步滚动
weixin_50552284的博客
09-24 1061
注：我的例子中，两个table中的行数相同（即，滚动条长度相同）。 mounted() { const tables = document.querySelectorAll('table') // 得到左边的table元素 const tableLeft = tables[0] // 得到右边的table元素 const tableRight = tables[1] let focus = 'left' // 左边的table：mouseov
滚动条在滚动，下面的盒子跟着滚动条移动
weixin_61843526的博客
03-01 1652
实现一起滚动 且不超过盒子的位置，需要添加算法，计算相对斜率，得到滚动条的滚动相对的比例 就是下面盒子的相对比例。预估退休后收入 ￥8,300</div>预估退休后调整支出 ￥8,300</div>-- 引入vue3的地址 CDN 引入 这时候需要访问远程的服务器-->-- 设置竖条下的框 -->-- 设置竖条下的框 -->-- 设置小竖条 -->
如何实现一个盒子在另一个盒子中滚动
灰灰的博客
02-15 648
如何实现一个盒子在另一个盒子中滚动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值