如何同步div的两个滚动条

2023-12-27

我有这个文件比较代码:http://jsfiddle.net/CrN6X/ http://jsfiddle.net/CrN6X/

现在它满足了我的需要:

  1. 一个只垂直滚动的大 div
  2. 两个仅水平滚动的较小潜水

这样我可以很容易地比较我的文件,但我有一个问题:只有当我一直向下滚动时才能访问底部滚动条。

我怎样才能让它们float或者将滚动条移动到另一个始终可见的 div,这样我就不需要将另一个 div 一直滚动到底部来访问它们?


其中的 javascript 正是您真正需要的,但我添加了 html,以便您可以看到它的实际效果。

$("#div1").scroll(function () { 
  $("#div2").scrollTop($("#div1").scrollTop());
  $("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () { 
  $("#div1").scrollTop($("#div2").scrollTop());
  $("#div1").scrollLeft($("#div2").scrollLeft());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="div1" style="float:left;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>

<div id="div2" style="float:right;overflow:auto;height:100px;width:200px;">
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
  <p>lulz</p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何同步div的两个滚动条 的相关文章

  • 如何在 Bootstrap 中将单选按钮设置为“选中”? [复制]

    这个问题在这里已经有答案了 我使用 Bootstrap 按钮作为单选按钮 http getbootstrap com javascript buttons http getbootstrap com javascript buttons 这
  • jQuery Mobile 和文本区域行

    所以 我想展示一个textarea仅 1 行 但 jQuery Mobile 并不这么认为 无论我在rows属性 它始终是 2 行高度 请问有什么解决办法吗 jQuery Mobile CSS 设置了特定的高度textarea要素 text
  • 如何使用React Native在屏幕上绘图?

    我正在尝试在 React Native 中实现一个 Android 绘图应用程序 我正在使用 PanResponder 但我不知道如何获取用户触摸的部分的坐标 我尝试过使用react native svg但我不知道该放在哪里PanRespo
  • 如何替换 CSS 表达式

    我有一个用于时间表条目的旧 ASP Web 应用程序 其中充满了 CSS 表达式 它们出现在 CSS 文件中 ApptPage position relative height expression Math max document bo
  • 在 json 对象中执行 javascript 代码?

    有远吗 所以像这样 key1 val1 key2 val2 some code document getElementById someid innerHTML test 那么 some code 会在没有任何用户干预的情况下执行吗 No
  • 将jQueryUI datepicker附加到div(显示位置错误)

    我在输入上使用 jQueryUI datepicker 默认情况下 jQueryUI 会附加 ui datepicker div to the body该文件的 有问题的输入位于屏幕上的 弹出 div 中 这意味着该 div 之外的任何点击
  • 滚动条宽度:细在 Firefox 中不起作用

    我刚刚在 Firefox 67 中实现了新的 css 滚动条颜色和滚动条宽度 滚动条宽度不起作用 无论我将其设置为自动 细化还是无 它都会显示相同的宽度 我想要它薄 但它不薄 我是这样实现的 root scrollbar color rgb
  • 如何在 Google 地图上旋转叠加图像?

    我正在尝试将一系列叠加层放置到 Google 地图上 我正在跟随地面覆盖层的示例代码 https developers google com maps documentation javascript examples groundover
  • 在 Javascript 中实现 Zobrist 哈希

    我需要在 Javascript 中为国际象棋引擎实现 Zobrist 哈希 我想知道实现此目的的最佳方法是什么 现在 我不是计算机科学家 也从未上过正式的算法和数据结构课程 所以如果我在这方面有点偏离 我很抱歉 据我了解 我需要一个 64
  • vue基于媒体查询绑定值

    carousel 3d display 3 width 150 height 150 我想根据媒体查询设置属性绑定 e g 当屏幕宽度 gt 960px 时 显示应变为 5 您可以尝试绑定display组件属性的值
  • LightningChart JS - LineSeries / Progressive X 的损坏

    我在使用 LightningChart 时遇到了一个有趣的问题 它似乎会破坏或以其他方式减少我的数据 具体取决于它与图表的 DateOrigin 的距离 我的数据是每秒 1000 个样本 我试图一次显示 1 2 周的数据 我正在使用 Cha
  • 提交外部有 INPUT 的表单,并修改值后

    我有一个form 有几个
  • 尝试将远程图像转换为 Base64 数据时出现 CORS 错误[重复]

    这个问题在这里已经有答案了 我需要将远程图像转换为给定其 URL 的 base64 但我遇到了 CORS 错误 并且不确定如何解决 我遵循了这个问题的一些解决方案 如何使用javascript将图像转换为base64字符串 https st
  • 如何使用javascript将数据存储在xml文件中?

    我是 javascript 新手 并在我的项目中使用它 因为我需要读取 xml 文件 然后在操作后我想将更新后的值存储回 xml 文件中 我成功从 xml 文件获取值 但无法存储值返回到 xml 文件 这是我尝试过的代码
  • React cloneElement 未设置键

    我正在构建一个动态生成键的表控件 我理解这可能不是一个好主意 我想键应该与其代表的数据唯一关联 否则 React 只能为我们生成唯一的 id 但无论哪种方式似乎没有设置按键 我不知道为什么 表中的行是用可以找到的函数生成的here http
  • 多个引导模式的滚动问题

    我有一个带有大量信息的模态页面 因此您需要滚动 该模式包含指向第二个模式的链接 When I 打开模态 1 单击链接打开模式 2 模式 1 保持在后台 然后关闭模式 2 以便我回到模式 1 modal 1 失去滚动 仍然有一个滚动条 但它不
  • 如何防止 Bootstrap Navbar Toggle 下推内容?

    我将 Bootstrap 与静态顶部导航栏一起使用 如下所示
  • 单击即可切换背景颜色和过渡

    这看起来应该很容易 但我真的找不到办法做到这一点 动画 http doir ir css gif http doir ir css gif 当您单击这些相应的链接时 我需要更改和过渡页面的背景颜色 我见过的最接近触发这种类型转换的事情是 仅
  • 在用户单击之前图像不会绘制在画布上?

    我使用执行类似以下操作的函数绘制几张图像 context drawImage img width 2 1 height 2 1 width height 我读过 我需要等待图像加载后才能绘制它 如下所示 img onload functio
  • 如何使用 jQuery 解析 JavaScript 对象

    jQuery JavaScript 中用于解析 JSON 对象并返回键 值对的 foreach 等效项是什么 JSON 对象 是什么意思 JSON 是一种用于序列化对象的文本格式 如果要循环访问通过反序列化 JSON 字符串获得的对象中的属

随机推荐

  • Flash CS4不肯放手

    我有一个Flash项目 它有很多源文件 我有一个使用率相当高的类 称之为 Jenine 我最近 也许是无情地 将 Jenine 从一个命名空间迁移到了另一个命名空间 我以为我们已经准备好了 我以为是时候了 新的 Jenine 在各方面都更好
  • JPA:两端都有列表,没有无限循环

    我正在尝试通过链接两个实体Set属性如 实体A Set
  • 寻找相当于机械化功能的请求

    我有兴趣看看 Requests 是否可以处理我主要在 Mechanize 中执行的一些任务 Mechanize 可以轻松处理填写表单和提交表单 但我很难在 Requests 中尝试做同样的事情 例如 import mechanize br
  • 有没有允许复制粘贴的 diff 工具

    是否有差异工具可以让您粘贴两段文本并获得差异 我无法使用在线工具 因为我正在处理专有数据 而且我还没有找到提供该功能的工具 Try WinMerge http winmerge org 它会做到这一点 Steps 下载并安装 winmerg
  • 将 +"" 添加到字符串会追加“0”

    由于偶然的打字错误 我遇到了一种我无法解释的行为 当我有 var text abc text the text变量突然变成abc0 有人可以对此提供任何见解吗 评估为数字0 这是因为为了应用一元加运算符 被强制为一个数字 与Number 这
  • PHP 类中的异常

    我正在为我的朋友编写一个 Web 应用程序 PHP 并决定使用我有限的 Java OOP 培训 我的问题是 在我的课程 应用程序中记录特定关键事情失败而不会真正破坏我的页面的最佳方式是什么 我的问题是我有一个对象 SummerCamper
  • 解析带有截断时区信息的 Java 日期

    考虑以下日期字符串 2012 10 01 01 02 03 004 0500 在 Java 中使用以下方式识别这一点SimpleDateFormat图案 yyyy MM dd HH mm ss SSSZ 但是 如果上面的时区信息被截断为 2
  • Azure blob 的阻止列表为空,但 blob 不为空!怎么会这样?

    这个问题简单来说就是 可以使用单个 PUT 请求创建块 blob 这将创建一个包含已提交内容的 blob 但该 blob不会有任何已提交的块 这意味着您不能假设提交的块的串联与提交的内容相同 使用块 blob 时 您必须特别注意具有空块列表
  • 如何 JSON 序列化集合? [复制]

    这个问题在这里已经有答案了 我有一个Pythonset包含对象 hash and eq 方法以确保集合中不包含重复项 我需要对这个结果进行 json 编码set 但即使传递一个空的set to the json dumps方法提出了一个Ty
  • 如何将 Vec 转换为 Vec? [复制]

    这个问题在这里已经有答案了 我已将文件读入无符号字节向量 let data fs read test bin expect Unable to read file 我怎样才能将这个向量转换 转换为Vec
  • 编译时弃用警告:零参数方法的 eta 扩展

    编译此代码片段时 scala 编译器会发出以下警告 不推荐使用零参数方法值的 eta 扩展 你是否 打算写Main this porFiles5 吗 警告 timerFunc porFiles5 当我将一个函数传递给另一个函数以进行简单的计
  • 使用 uwsgi-nginx-flask-docker 中的 Tesseract 4 - Docker 容器

    我的 python 项目在本地运行 并且它可以工作 我将 python 中的 tesseract 与 subprocess 包一起使用 然后我部署了我的项目 因为我使用 Flask 所以我安装了tiangolo uwsgi flask ng
  • Core Data 整数使用哪些整数类型

    Core Data 有 int16 int32 和 int64 当以 NSNumber 形式使用这些时 我应该使用 NSInteger 或 int 以及它们各自的 NSNumber 方法 numberWithInt numberWithIn
  • 在定义的时间间隔后自动刷新 ASP.NET 网页?

    在我的一个网站中 我需要实现15分钟后网页自动刷新 为此 我编写了以下代码行 但我面临一个问题 在 15 分钟的持续时间之后 页面将刷新为新页面加载 在我的页面上 我使用了包含城市列表的组合框 有时我从索引 3 处的列表中选择一个项目 之后
  • C# 中的属性

    我知道 C 以及一般的 NET 非常注重属性 然而 尽管我已经使用 C 编程多年 但我还没有发现自己曾经使用过它们 有人可以让我开始使用它们 并解释在哪里最好使用它们吗 Thanks From Pro C 2008 和 NET 3 5 平台
  • .net检测分布式事务

    在我的应用程序中 我使用以下模式来调用数据库 do a transaction using TransactionScope transaction new TransactionScope TransactionScopeOption R
  • Git-svn 克隆错误:“致命:不是有效的对象名称 'refs/remotes/tags/Tag With Spaces'”

    我在用着git svn clone git 版本 1 9 4 msysgit 0 将 Subversion 存储库迁移到 Git Subversion 存储库的标签中包含空格 这会导致fatal Not a valid object nam
  • Athena 在不同账户的表之间查询

    我可以使用两个不同的 IAM 角色单独访问两个不同的 Athena 表 因为每个角色位于不同的账户中 有没有办法运行从两者中提取的单个查询 即 INNER JOIN 在引擎盖下 Athena 表数据位于 S3 存储桶中 Athena 支持跨
  • 为什么 EF 为简单查询生成子查询?

    有一个简单的 Linq to EF var query from p in db Posts where p BlogtId blogId select p 它会生成以下形式的 SQL SELECT Extent1 PostId Exten
  • 如何同步div的两个滚动条

    我有这个文件比较代码 http jsfiddle net CrN6X http jsfiddle net CrN6X 现在它满足了我的需要 一个只垂直滚动的大 div 两个仅水平滚动的较小潜水 这样我可以很容易地比较我的文件 但我有一个问题