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)