Skip to content

Support iframes with WindowScroller - #1093

Closed
mkralla11 wants to merge 1 commit into
bvaughn:masterfrom
mkralla11:iframe
Closed

mkralla11 wants to merge 1 commit into
bvaughn:masterfrom
mkralla11:iframe

Conversation

@mkralla11

Copy link
Copy Markdown

The WindowScroller should also be functional for use with iframes. Things to note:

  • given a scrollElement of contentWindow provided by an iframe, container.document.documentElement, and element.document is used in place of the applicable document, respectively.
  • Linter is 👍
  • The needed changes cause tests to fail, and I have not found the appropriate fixes to address them. Any help would be thoroughly appreciated.
  • I satisfied the flow checker in a very naive way for a few cases, using any instead of the appropriate type because I couldn't find the correct types in the flow docs for documentElement and contentWindow (I apologize for this, I'm not a flow expert by any means).
  • Finally, I had to create a closure here to allow the document to be available for the given scope due to the way this module has been implemented already (not a huge issue, but I want to make sure it was known.)

solves issue #1088

);

renderFn.mock.calls[0][0].onChildScroll({scrollTop: 200});
console.log('here', contentWindow.scrollY)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can get rid this log


export function getDimensions(
scrollElement: ?Element,
scrollElement: ?any,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We like to avoid any There are valid flow types for html dom elements. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

export function getPositionOffset(element: Element, container: Element) {
if (isWindow(container) && document.documentElement) {
const containerElement = document.documentElement;
export function getPositionOffset(element: Element, container: any) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no any

*/
export function getScrollOffset(element: Element) {
if (isWindow(element) && document.documentElement) {
export function getScrollOffset(element: any) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no any


function enablePointerEventsAfterDelayCallback() {
enablePointerEventsIfDisabled();
const createEnablePointerEventsAfterDelayCallback = doc => () => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why don't you just pass it as a parameter? and just use .bind?

export function registerScrollListener(
component: WindowScroller,
element: Element,
element: any,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no any

export function unregisterScrollListener(
component: WindowScroller,
element: Element,
element: any,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no any

@github-actions github-actions Bot added the Stale label Oct 10, 2024
@github-actions github-actions Bot closed this Oct 10, 2024
@bvaughn

bvaughn commented Oct 18, 2026

Copy link
Copy Markdown
Owner

Sorry for the very long delay in getting back to you about this!

I've just finished a large update for version 10 of react-virtualized (#1900): the library has been rewritten in TypeScript, every component is now a function component (React 18+ is required), and the source moved from source/ to lib/. Because of that, this PR can't be merged as-is. WindowScroller has been replaced by a scrollElement prop, but it still assumes the component's own window/document, so iframes still aren't supported.

If you're still interested in this change, I'd welcome a new PR with it rebased onto the version-10 branch (or onto master once version 10 has been merged).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants