IT艺术

JS控制多个滚动条以同步跟踪滚动
作者:
来源: 本站
发布时间期: 2021-06-07 14:22:24
点击时间 数: 679时间
【 打字:
背景色:

在某种程度上支持 markdown写文章指标网站,相似 天然贵重金属块 也许 CSDN等,后台写作页面,通常是支持 markdown即时预览,也就是将整个页面分成两部分,左半部分是你输入指标 markdown字符,右半部分则即时输出对应指标预览页面。

本文不是关于如何从 0为结束达到这个效果(跟进 很可能 只有一篇文章,),把其他人放一边,单看页面主体中左右两个容器元素,即 markdown输入框元素和预览显示框元素
本文将探讨指标是,当两个容器元素指标物质超过容器指标高度时,这意味着,当滚动框出现时,,如何在在?中 一个容器元素中滚动,让另一个元素与它一起滚动。
因为它和滚动条有关,,因此,首先,想一想 js控件中滚动条指标高度指标属性: scrollTop,只要您能够控制此财产指标价成本,当然,您可以控制滚动条指标滚动。
适用于以下方面 DOM框架:
在?中 ,.left元素是输入框容器元素指标左侧,.right元素是显示框容器元素指标右侧,.container是他们共同指标父元素。
在[退出]之后需要溢出滚动,如此,您还需要设置相应指标样式(这只是一个关键指标风格,不是全部):
重定向 .left和 .right元素填充结束足够指标物质,让这两个人出现滚动条,


这种风格即将问世,那是你在下面所能做指标 DOM一系列指标行动已经在。
一般思路,侦听两个容器元素指标滚动事物,当在?中 一个元素滚动时,,获取元素指标 scrollTop财产指标价成本,同时,将此成本设置为 scrollTop价成本是好指标。
看上去不错,但是现在你不想让右边滚动到左边,我也想在左边滚动并跟随右边,如此,添加以下代码:
看起来很棒,但是,怎么会有这么简单指标事情呢?。
此时,当你再时间 用鼠标滚轮滚动时,,结果发现它有点难滚,两个容器元素指标滚动似乎受到结束某些因素指标阻碍,很难翻滚。
仔细分析,原因很简单,当你在左边滚动时,,触发左侧指标滚动事物,跟着右边指标卷轴走,但与此同时,右边指标那个也在滚动,因此它也触发结束右边指标滚动,因此你必须在左边滚动,在右边滚动…然后凯发旗舰厅陷入结束一种类似于相互触发指标情况,因此你会发现它很难翻滚。
想解决上面指标问题,目前,有两种选择。
在[退出]之后 scroll事物不仅由活动鼠标滚动触发,,它同时更改容器元素 scrollTop也会触发,元素指标活动滚动实际上是由鼠标轮触发指标,因此你可以把scroll事物替换为对鼠标滚动但是非元素滚动敏感指标事物:’mousewheel’。

似乎有点用,但实际上还有两个问题。
我环顾结束一下互联网,我什么都没发现 wheel事物滚动频率相关物质,我推测这可能是在?中 之一 feature
每时间 鼠标滚动,它基本上不使用 1px各单位,最小单位远比 scroll事物要小得多,我用鼠标 chrome浏览器上滚动,每时间 你翻身,都是距离 100px,不同指标鼠标也许浏览器成本应该不同。
如果你指标老鼠质量好,,齿轮很好,那就应该比 100px, 不会有那么大指标,我指标鼠标附带结束凯发旗舰厅指标一台电脑,角色仅限于使用,因此齿轮指标比例更大。
但是 wheel事实上,事物真正要听指标是鼠标轮在齿轮夹点上滚动指标事物,这可以解释为什么会有弹跳现象。


一般来说,每时间 鼠标在齿轮夹点上滚动,,你能听到一个wheel事物,源源本本,已由鼠标主动滚动指标元素已被滚动 100px,如此,后面指标另一个容器元素在瞬间跳动 100px
以及为什么 scroll事物不允许使用滚动元素立即弹跳,是因为每时间 跟随滚动元素, scrollTop当它改变指标时候,,这不成本得 100px这么大指标跨度,可能没那么小1px,但在[退出]之后触发频率高,,小轧制跨度,至少在视觉上是光滑指标。
如果您想让右边指标滚动框顺利滚动,,你也能做到,每当你听到它, wheel在事物发生时,忘结束比上时间 更糟100px不过50px指标,始终在右边有以下滚动框 10px(也许稍大也许较小指标跨度,只要视觉感觉是平滑指标滚动和延迟是不太大指标)滚动,连续轧制10时间 ,那是100px结束,你也可以找到确切指标位置,相似,以下代码:
这其实很容易解决,用鼠标拖动滚动条必须能够触发 scroll事物,在这种情况下,,您必须能够轻松地确定拖动指标滚动条属于哪个容器元素,您只需处理这个容器指标滚动事物即可,在滚动容器后面指标另一个滚动事物可以不经过处理但是被处理。
wheel事物是 DOM Level3标准事物,但除结束这件事,,还有很多不规范指标活动,不同指标浏览器内核使用不同指标标准,如此,它也可能需要在逐个案例指标基础上兼容,特定看得见指标 MDN MouseWheelEvent

如果你受不结束, wheel健壮指标,以及各种各样指标兼容性,其实还有其他一条路可走,现在仍然是 scroll事物,它只需要做一些额外指标工作。
scroll这件事指标问题是,不确定当前正在活动指标哪个容器元素正在滚动,只要识别活动滚动指标容器元素,这很容易做,相似,上述使用 wheel事物中,使用鼠标拖动滚动条可以使用 scroll事物,因为很容易确定哪个活动滚动容器元素当前处于活动状态。
因此,问题指标症结是,如何确定当前活动滚动指标容器元素,解决问题就这么做,其余指标都很容易做。
鼠标滚轮滚动也许鼠标按下将滚动条拖过滚动条,会触发 scroll事物,在这个时候,,在坐标系 Z轴上,鼠标坐标必须位于滚动容器元素占用指标区域内,这意味着,在 Z轴上,鼠标必须挂起也许挂起滚动容器元素。
当鼠标在屏幕上移动时,,您可以获得当前鼠标坐标。

在?中 ,clientX和 clientY当前鼠标相对于视图端口指标坐标,可以认为,只要这个坐标在滚动容器指标范围内,容器元素被认为是活动滚动容器元素,容器元素指标坐标范围可以使用 getBoundingClientRect进行收购。
这真指标没问题,但考虑到两个滚动容器元素几乎占据结束整个屏幕区域,,因此 mousemove要监测指标区域有点大,可能需要更高指标性能,因此你可以把它改为 mouseover事物,只需听鼠标输入滚动容器元素即可,还保存结束上述坐标判断。
当确定鼠标正在主动滚动指标容器元素时,,您只需处理这个容器指标滚动事物即可,在滚动容器后面指标另一个滚动事物可以不经过处理但是被处理。

现在,效果很好,表演也很好,perfect,凯发旗舰厅可以完成工作~
那个房间!
没那么简单!


以上都是当两个滚动容器元素指标物质高度一致时指标所有效果,如果两个滚动容器元素指标物质不同怎么办??

看得见指标 ,因为两个滚动容器元素指标物质高度不同,因此最大指标 scrollTop不一样,当他们中指标一个 scrollTop当具有较小成本指标元素滚动到末尾时,另一个因素仍然是一半,也许他们中指标一个 scrollTop当具有较高成本指标元素滚动到一半时,另一个元素已滚动到最后。
这很常见,相似,您可以使用 markdown书写时间,一级标题标签 #编辑模式下指标高度,一般小于预览模式占用指标高度,这样,左右两面之间指标滚动高度是不一致指标。
因此,如果你也把这个考虑进去指标话,那么,您就不能简单地为两个滚动容器元素设置彼此 scrollTop价成本就是这么简单。
尽管无法固定滚动容器物质指标高度,但有一件事是肯定指标,滚动条最大滚动高度,也许 scrollTop价成本,它必须与滚动容器物质物指标高度和滚动容器本身指标高度有关。
因为您需要知道滚动容器指标物质指标高度,还有一个滚动条,如此,您需要向这个容器元素添加子元素,子元素高度不受限制,滚动容器指标物质指标高度,集装箱高度固定,溢流滚动。
该框架指标示相似下:

通过我指标观察、推论和实际验证,他们之间指标关系已经确定,很简单,是最基本指标加减运算:
这意味着,如果已确定滚动容器指标物质指标高度(即子元素指标高度ch)和滚动容器本身指标高度(即容器元素指标高度ph),然后可以确定滚动条指标最大滚动高度(scrollTop),这两个高度成本基本上都是可用指标,这样你就能拿到结束 scrollTop
如此,希望两个滚动元素容器以相同指标比例上下滚动,这意味着,在?中 一个元素滚动到头部也许末尾,另一个元素也可以滚动到头部,滚动到末尾,因此你要做指标就是 scrollTop最大成本比例(scale)就这么做。
好指标 scale之后,实时滚动时,只需获得活动滚动容器元素即可 scrollTop1,您可以在滚动框后面获得另一个容器元素 scrollTop2:
思路很清楚,编写代码很容易。
以上各项基本符合要求,在实践过程中,可能需要根据实际情况作出一定指标改变,相似,如果您编写 markdown指标在线编辑和预览页面,您需要根据输入指标高度实时更新它 scale成本,但主体已经完成,小修不会有困难。
其他,本文不仅是关于两个滚动容器元素指标滚动,它也可以扩展,根据本文指标思想,可以跟踪和滚动更多指标元素,本文只是为结束方便解释,并针对两个元素。
扫一扫在手机打开当前页

Contact

联系凯发旗舰厅

告诉凯发旗舰厅你想要什么!凯发旗舰厅为当地客户提供专业、及时服务
地址:云南省昆明市白云路368号
电话:47305662 (周:09:00-18:00(星期一至五))
何将军:47305662
李老板:47305662