Question

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

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

我想要这样做的原因主要是因为我无法找到一种可靠的方法来将iframe的高度可靠地调整为内容（如果内容包含未指定高度的元素，则会有一些非常奇怪的现象）。（或者，如果有人知道这样做的可靠方法那就太棒了）

所以我有一个“视口”，可以这么说，在我的UI中，它包含一个iframe，它包含一个内容页面，如果它比iframe大，你可以滚动它。因为我无法可靠地将iframe的高度调整为其内容，我将iframe高度设置为此视口的高度并将其设置为垂直滚动其内容，但我无法将iframe的宽度设置为视口的宽度它会在内容的css中触发某些媒体查询，即使该内容的html大于该内容。（如果我可以欺骗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-mask的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)

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

1 个答案: