两个盒子同步滚动

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

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

  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="conte
最低0.47元/天 解锁文章
憨憨95程序员
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实现两个盒子同步滚动
a253399414的博客
08-08 1395
最近在工作中有一个版本对比的需求，左右两边的展示不同的版本，在滚动左边版本的时候右边版本也随之滚动。当时做的时候准备打算用一个大盒子包括这两个盒子，滚动的时候滚动最外面的大盒子，后来因为组长规划的是两个版本用一个组件，传一个叫做position的props，再传不同版本的数据就可以。后来考虑了一下，在我的知识范围里面如果不能用盒子包括，就只能用事件监听加上操纵dom了。下面是我的实现方法。 import React, {Component} from 'react'; import './Test.css
同步滚动条滚动
weixin_45152566的博客
11-17 81
<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:
推荐开源库：Syncscroll - 同步滚动解决方案
最新发布
gitblog_00082的博客
05-30 323
推荐开源库：Syncscroll - 同步滚动解决方案 项目地址:https://gitcode.com/asvd/syncscroll 1、项目介绍 同步滚动（Syncscroll）是一个轻量级的JavaScript库，只有946字节的压缩大小，完全无需依赖。它的核心功能是让两个或多个可滚动区域实现同步滚动，你可以在线体验演示效果。这个简洁高效的库为开发者提供了一种优雅的方式来管理页面上的滚动同...
div同步滚动
leixilong的专栏
11-14 559
1321321312321111111111111111111111111111111111132132131232111111111111111111111111111111111113213213123211111111111111111111111111111111111321321312321111111111111111111111111111111111
div同步滚动js
xuelang532777032的博客
06-03 816
无标题文档 111111111111111111111111111111111111111111111111111111dsdsdsddadasd23232323232222222222222222222222222222222222222 1234564d65sds5dad起嗯无群二wq9e8eqw89e789we89qwe98wq74e9q8we89wq98
Jquery使两个Div的滚动条同步滚动
weixin_33860553的博客
03-03 1495
$("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 $("#div1").scrollLeft($(this).scrollLeft()); // 横向滚动条 }); $("#div1").scroll(function(...
给盒子设置滚动
Mia的博客
03-26 2733
在网上查了各种教程，都不可行，最后偶然尝试发现，原来给父盒子设置overflow:scroll竟然就可以了。嗯，真是神奇。 <div class="body-head" :style="curHeight"> <test> <transition-group tag="ul" class='slide-ul' name="list"> <templ
Android实现两个ScrollView互相联动的同步滚动效果代码
09-03
本文将详细介绍如何在Android中实现两个ScrollView的联动同步滚动。 首先，由于Android SDK并未直接提供ScrollView的滚动监听事件，因此我们需要自定义一个ScrollView子类，并重写`onScrollChanged()`方法。这个...
两个ListView同步滚动
05-17
当我们在一个界面中需要展示两个或多个ListView，并希望它们能保持同步滚动时，这通常是为了提供更好的用户体验，比如对比不同列的数据或者展示相关联的信息。这个功能可以通过一些技术手段来实现，下面我们将详细...
原生JS控制多个滚动条同步跟随滚动效果
11-29
在网页开发中，有时我们需要实现特定的交互效果，比如在Markdown编辑器中，用户在左侧输入文字，右侧即时预览，且两个区域的滚动条能够同步滚动。这涉及到JavaScript对DOM元素滚动条的控制，主要涉及到`scrollTop`...
两个CListCtrl控件滚动条同步
12-09
这时，用户滚动一个`CListCtrl`时，另一个也需要同步滚动，以提供一致的用户体验。本文将详细介绍如何实现两个`CListCtrl`控件的滚动条同步。 1. **滚动条同步的基本原理**： 滚动条同步的核心是监听和处理每个`...
无限长滚动列表（虚拟列表）的实现
ZegTsai's blogs
03-04 1985
无限长滚动列表（虚拟列表）的实现 原理：监听容器滚动，根据滚动距离生成对应列表，再利用绝对定位，将列表展示到容器的对应位置。 1、预先处理容器样式与生成数据 容器列表的最大高度为500px，列表项（li）的高度定为50px，即容器只展示10条数据。 <style> ul.container { position: relative; width:500px; max-height: 500px; /* 限定容器展示区域的大小 */
滚动条在滚动，下面的盒子跟着滚动条移动
weixin_61843526的博客
03-01 1551
实现一起滚动 且不超过盒子的位置，需要添加算法，计算相对斜率，得到滚动条的滚动相对的比例 就是下面盒子的相对比例。预估退休后收入 ￥8,300</div>预估退休后调整支出 ￥8,300</div>-- 引入vue3的地址 CDN 引入 这时候需要访问远程的服务器-->-- 设置竖条下的框 -->-- 设置竖条下的框 -->-- 设置小竖条 -->
js如何实现两个滚动条同步滚动
weixin_44840212的博客
06-27 8965
如下图所示：实现两个区域竖向滚动条同步滚动 页面结构布局和样式如下：（为了一张截图展示，结构里p标签都有删减，可随意添加能出滚动条就可以） 下图是js代码：代码没几行，注意下边注释，涉及同步滚动比例计算 注释：1、scale为滚动条滚动比例（左边可滚动最大高度/右边可滚动最大高度） clientHeight和offsetHeight均可获取元素高度，这里用clientHeight是因为这个属...
如何实现一个盒子在另一个盒子中滚动
灰灰的博客
02-15 499
如何实现一个盒子在另一个盒子中滚动
【CSS技巧系列】解决子容器滚动引发父容器滚动问题
程麒阁的博客
08-31 1959
有些时候子容器和父容器都有滚动，子容器滚动到尽头的时候父容器会触发滚动，更有甚者有可能会触发谷歌浏览器的双指回退，那么你知道该怎么解决嘛？
div同步滚动的方式
weixin_42470796的博客
02-16 1301
先来放图看效果 在一切开始前我们先来测试原生的js实现的方法 1.新建一个test.html文件 要求在html中创建两个div，同等固定高度的，并随意填充任意的text,p div等大量超出div的高度。 2.需求分析 我们的目的是尽量左边滚动右边同步滚动，而右边滚动左边却不滚动。代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
原生JS控制多个滚动条同步跟随滚动
热门推荐
Quiet-Night的博客
12-21 1万+
原生JS控制多个滚动条同步跟随滚动
vue 两个组件同步滚动
04-20
可以使用 vue-scroll-sync 插件来实现同步滚动。安装插件后，在需要同步的组件上加上 v-scroll-sync="{group: 'group-name'}" 属性，其中 group-name 可以自定义，表示这两个组件属于同一个组，需要同步滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值