当前位置: 首页 > 知识库问答 >
问题:

javascript - 怎么实现两个滚动条,当内部滚动条滚动到底部时外部滚动条立刻向下滚动?

王杰
2023-10-21

现在的情况是:当内部滚动条滚动到底部时如果继续滚动,外部滚动条不会滚动,需要停顿或者移动鼠标滚动才能触发外层滚动条
image.png

共有1个答案

王骏
2023-10-21
<div style="overflow:auto; height:200px;">  <div style="overflow:auto; height:100%; white-space:nowrap;">    <!-- 内容 -->  </div></div>

解释:
这个问题可以通过设置外层 div 的 overflow 属性为 auto 来解决。overflow: auto 会使得如果内容溢出 div 的高度或宽度时,会自动出现滚动条。在这种情况下,将内部 div 的 height 设置为 100%,意味着它会占据整个外部 div 的高度。然后,将内部 div 的 white-space 属性设置为 nowrap,这样内容就不会自动换行,而是会在一行中显示。这样就可以实现两个滚动条的联动效果。

 类似资料:
  • 本文向大家介绍js实现滚动条滚动到页面底部继续加载,包括了js实现滚动条滚动到页面底部继续加载的使用技巧和注意事项,需要的朋友参考一下 这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果

  • 因为部分低版本安卓机型上,如果一个容器通过 position: absolute; 或者 transform: translate3d(x,x,x); 定位,那么在滚动的时候有可能会出现闪烁问题。 为了解决这种bug,我们实现了原生滚动和JS滚动条两种模式,并且可以自由切换。从 v0.3.1 版本开始,默认的滚动条类型就是 "native" ,即默认使用系统原生滚动条。只有当你发现页面存在滚动闪烁

  • 滚 动条(scrollbar)可以用来对图表进行平移操作。 y 轴滚动条 Highstock 在 4.2.6 时支持了 任意坐标轴滚动条,即 x、y 轴都支持了滚动条。 y 轴滚动条相关配置参见 yAxis.scrollbar。 在线试一试(缩放后才会显示 y 轴滚动条) 在 Highcharts 图表中使用滚动条 如果需要在 Highcharts 图表中使用滚动条,只需要将 highcharts

  • 我有一个类可以画一些非常简单的图形,比如直线、圆和矩形。线条可以动态扩展,有时当它们扩展到超出分辨率时,如果没有滚动条,就无法看到。因此,我已经将JScrollPane添加到JFrame中,但不幸的是,尽管已经调用了布局管理器,但滚动条还是无法滚动。 这是我所拥有的:-一个绘制组件(线条、矩形、圆形)的类-一个设置JFrame/JScrollPane的类 这是我的GUI类的摘录代码: 通过上面的代

  • 本文向大家介绍JS JQUERY实现滚动条自动滚到底的方法,包括了JS JQUERY实现滚动条自动滚到底的方法的使用技巧和注意事项,需要的朋友参考一下 设置页面加载时滚动条自动滚到底的方法: jQuery: JavaScript: 以上2种方法均可以实现页面加载时滚动条自动滚动到底,小伙伴们根据自己的实际需求,自由选择吧

  • 我正在研究一个相当复杂的布局。有两个区域(红色和蓝色)必须同时垂直滚动,但右侧区域(蓝色)必须能够独立于其他区域水平滚动。 我设法做到了这一点,但是滚动条总是在的底部,我需要滚动条总是在视口的底部可见。 用HTML/CSS可以做到这一点吗?什么简单的JS或jQuery插件可以帮助实现这一点? 小工具演示