Javascript从滚动事件获取原始数据

Question

有没有一种方法可以在不使用scrollTop和scrollLeft的情况下将滚动事件应用于多个元素？ 我试过在第一个元素滚动处理程序内添加$（'＃element2'）。scroll（event），但似乎不起作用。

否则，是否有可能从javascript滚动事件中获取jQuery用于更新其滚动条的原始数据，并手动执行此操作？

我之所以要这样做，基本上是因为我找不到一种可靠的方法来将iframe的高度可靠地确定为其内容的大小（如果内容中包含未指定高度的元素，那将会有些奇怪）。 （或者，如果有人知道执行此操作的可靠方法，那就太好了）

可以这么说，我的UI中有一个“视口”，其中包含一个iframe，该iframe包含一个内容页面，如果该页面比iframe大，则可以滚动。 由于无法可靠地将iframe的高度调整为其内容的大小，因此我将iframe的高度设置为该视口的高度，并将其设置为垂直滚动其内容，但是当时我无法将iframe的宽度设置为视口的宽度即使该内容的html大于该内容，它也会在该内容的CSS中触发某些媒体查询。 （如果我可以诱骗iframe认为它的大小与实际大小不同，那么那也可以解决问题）

我的解决方案是将iframe的宽度设置为其内容的宽度，然后在框架周围设置一个包装器，将其设置为视口的宽度，从而滚动框架。 这里的问题是，滚动非常混乱，因为iframe仅垂直滚动，而包装器仅水平滚动（对角滚动只是向上或向下滚动，有时会突然向侧面滚动）。 我想从iframe中捕获这些滚动事件，并将它们（或至少是x的分量）应用于包装器，以使滚动平滑。

我之所以不能使用scrollLeft（）的原因是，iframe的宽度是根据其内容调整大小的，只能垂直滚动，因此scrollLeft始终为0。

很抱歉，冗长的解释：/

提前致谢

Answer 1

因此，我发现了一种似乎很好用的解决方法。

我添加了一个ui-mask来捕获所有滚动输入。 遮罩需要能够滚动，因此我在遮罩内部创建了一个较大的遮罩内容，该内容不断得到它的scrollLeft和scrollTop重置（因此您永远无法滚动到它的边缘）。 我还将ui-mask包裹在mask-wrapper中，以便可以从视图中隐藏滚动条。

的HTML：

<div id="viewport">
  <div id="mask-wrapper">
    <div id="ui-mask">
      <div id="mask-content"></div>
    </div>
  </div>
  <iframe ... ></iframe>
</div>

CSS：

#viewport {
  overflow-x: scroll;
  width: 100%;
  height: 100%;
}

#mask-wrapper {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#ui-mask {
  overflow: scroll;
  height: 100%;
  width: 100%;
  z-index: 11;
  position: absolute;
  /* To hide the scrollbars (20 is just arbitrary, might want more) */
  right: -20px;
  padding-right: 20px;
  bottom: -20px;
  padding-bottom: 20px;
}

#mask-content {
  width: 200%;
  height: 200%;
  position: absolute;
  left: 0%;
  top: 0%;
}

然后，我只是将ui-mask的scrollLeft和scrollTop设置为某个偏移量（以便我们可以滚动所有四个方向），然后将scroll事件绑定到ui-mask。 在滚动事件中，在再次将它们重置为偏移量之前，我获取并存储了ui蒙版的scrollTop和scrollLeft（减去偏移量）。 现在，我有了滚动偏移量，可以用来插入我想要的任何其他元素。

（我正在使用coffeescript）

offset = 200 # Offset just needs to be something bigger than what you can scroll in one event
mask = $('#ui-mask')
mask.scrollTop(offset)
mask.scrollLeft(offset)
mask.scroll ->
  top = mask.scrollTop() - offset
  left = mask.scrollLeft() - offset
  mask.scrollLeft(offset)
  mask.scrollTop(offset)
  # Do something with top and left
  $(someEl).scrollLeft($(someEl).scrollLeft() + left)
  $(anotherEl).scrollTop($(anotherEl).scrollTop() + top)