0

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

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

我想这样做的原因本质上是因为我找不到可靠地调整 iframe 高度到其内容的好方法（如果内容包含没有指定高度的元素，则会出现一些非常奇怪的情况）。（或者，如果有人知道这样做的可靠方法，那就太好了）

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

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

我不能使用 scrollLeft() 执行此操作的原因是 iframe 的宽度根据其内容调整大小并且仅垂直滚动，因此 scrollLeft 始终为 0。

抱歉，解释太长了：/

提前致谢

4

1 回答 1

0

所以我找到了一个似乎工作得很好的解决方法。

我添加了一个 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 设置为某个偏移量（以便我们可以滚动所有四个方向），然后将滚动事件绑定到 ui-mask。在滚动事件中，我获取并存储 ui-mask 的 scrollTop 和 scrollLeft（减去偏移量），然后再次将它们重置为偏移量。现在我有了滚动偏移量，可以用来插入我想要的任何其他元素。

（我正在使用咖啡脚本）

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)
于 2013-07-17T21:36:22.117 回答