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

Question

Is there a way to apply a scroll event to multiple element without using scrollTop and scrollLeft? I've tried adding $('#element2').scroll(event) inside of the first elements scroll handler, but it doesn't seem to work.

Otherwise, is it possible to get the raw data that jQuery uses to update its scrollbars from a javascript scroll event and do this manually?

The reason I want to do this is essentially because I couldn't find a good way to reliably size an iframe's height to it's content (there was some very weirdness if the content contained elements with no height specified). (Alternatively, if anyone knows a reliable way to do this that'd be great)

So I have a "viewport", so to speak, in my UI which holds an iframe which holds a content page which you can scroll around if it's bigger than the iframe. Because I couldn't size the iframe's height to its content reliably, I set the iframe height to the height of this viewport and set it to scroll its content vertically, but I can't set the iframe's width to that of the viewport as then it triggers certain media queries in the content's css even though the html of that content is larger than that. (If I could trick the iframe into thinking it's a different size than it is, then that would also solve the problem)

My solution was to set the iframe's width to that of it's content, then have a wrapper around the frame, set to the width of the viewport, which would scroll the frame. The problem here is that the scrolling is very jerky, as the iframe only scrolls vertically and the wrapper only scrolls horizontally (scrolling diagonally just scrolls up and down or sometimes jerks suddenly to the side). I want to capture these scroll events from the iframe and also apply them (or at least the x component of it) to the wrapper in order to smooth out the scrolling.

The reason I can't use the scrollLeft() to do this is that the iframe's width is sized to its content and only scrolls vertically, so the scrollLeft is always 0.

Sorry for the long explanation :/

Thanks in advance

Answer 1

So I found a workaround which seems to work fairly well.

I added a ui-mask which captures all scroll input. The mask needs to be able to scroll, so I created a large mask-content inside the mask which constantly gets it's scrollLeft and scrollTop reset (so you can never scroll to it's edge). I also wrapped the ui-mask in a mask-wrapper so I could hide the scrollbars from view.

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%;
}

Then I just set the ui-mask's scrollLeft and scrollTop to some offset (so that we can scroll all four directions) then bind the scroll event to the ui-mask. On a scroll event, I get and store the scrollTop and scrollLeft of the ui-mask (minus the offset) before resetting them to the offset again. Now I have scroll offsets I can use to plug into any other element I want.

(I'm using 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)