Commit b02d1e1

committed

Optimize and refactor getScrollElement

1 parent 7559469 commit b02d1e1Copy full SHA for b02d1e1

File tree

+42

-43

lines changed

+42

-43

lines changed

Lines changed: 3 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { PropTypes } from 'prop-types';`
`4`	`4`	`import debounce from 'lodash.debounce';`
`5`	`5`	`import throttle from 'lodash.throttle';`
`6`	`6`	`import isIntersectionObserverAvailable from '../utils/intersection-observer';`
`7`		`-import getScrollElement from '../utils/get-scroll-element';`
	`7`	`+import getScrollAncestor from '../utils/get-scroll-ancestor';`
`8`	`8`
`9`	`9`	`const getScrollX = () =>`
`10`	`10`	`typeof window === 'undefined' ? 0 : window.scrollX \|\| window.pageXOffset;`
`@@ -54,7 +54,7 @@ const trackWindowScroll = BaseComponent => {`
`54`	`54`	`return;`
`55`	`55`	`}`
`56`	`56`
`57`		`- const scrollElement = getScrollElement(`
	`57`	`+ const scrollElement = getScrollAncestor(`
`58`	`58`	`ReactDom.findDOMNode(this.baseComponentRef.current)`
`59`	`59`	`);`
`60`	`60`
`@@ -69,7 +69,7 @@ const trackWindowScroll = BaseComponent => {`
`69`	`69`	`return;`
`70`	`70`	`}`
`71`	`71`
`72`		`- this.scrollElement = getScrollElement(`
	`72`	`+ this.scrollElement = getScrollAncestor(`
`73`	`73`	`ReactDom.findDOMNode(this.baseComponentRef.current)`
`74`	`74`	`);`
`75`	`75`

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,35 @@`
	`1`	`+// Adapted from https://github.com/loktar00/react-lazy-load/blob/master/src/utils/parentScroll.js`
	`2`	`+`
	`3`	`+const getElementOverflowValues = (element: HTMLElement) : string => {`
	`4`	`+ const computedStyle = getComputedStyle(element, null);`
	`5`	`+`
	`6`	`+ return (`
	`7`	`+ computedStyle.getPropertyValue('overflow') +`
	`8`	`+ computedStyle.getPropertyValue('overflow-y') +`
	`9`	`+ computedStyle.getPropertyValue('overflow-x')`
	`10`	`+ );`
	`11`	`+};`
	`12`	`+`
	`13`	`+const getScrollAncestor = (element: Node) : HTMLElement \| Window => {`
	`14`	`+ if (!(element instanceof HTMLElement)) {`
	`15`	`+ return window;`
	`16`	`+ }`
	`17`	`+`
	`18`	`+ let parent : Node = element;`
	`19`	`+`
	`20`	`+ while (parent) {`
	`21`	`+ if (!(parent instanceof HTMLElement)) {`
	`22`	`+ break;`
	`23`	`+ }`
	`24`	`+`
	`25`	`+ if (/(scroll\|auto)/.test(getElementOverflowValues(parent))) {`
	`26`	`+ return parent;`
	`27`	`+ }`
	`28`	`+`
	`29`	`+ parent = parent.parentNode;`
	`30`	`+ }`
	`31`	`+`
	`32`	`+ return window;`
	`33`	`+};`
	`34`	`+`
	`35`	`+export default getScrollAncestor;`

Lines changed: 0 additions & 39 deletions

This file was deleted.

Lines changed: 4 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ module.exports = {`
`12`	`12`	`module: {`
`13`	`13`	`rules: [`
`14`	`14`	`{`
`15`		`- test: /\.jsx?$/,`
	`15`	`+ test: /\.(j\|t)sx?$/,`
`16`	`16`	`include: path.resolve(__dirname, 'src'),`
`17`	`17`	`exclude: /(node_modules\|bower_components\|build)/,`
`18`	`18`	`use: {`
`@@ -46,4 +46,7 @@ module.exports = {`
`46`	`46`	`extensions: ['js', 'jsx', 'ts', 'tsx'],`
`47`	`47`	`}),`
`48`	`48`	`],`
	`49`	`+ resolve: {`
	`50`	`+ extensions: ['.ts', '.tsx', '.js', '.jsx'],`
	`51`	`+ },`
`49`	`52`	`};`

Comments

(0)