10 examples of 'scrollintoview react' in JavaScript

Every line of 'scrollintoview react' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
5function scrollIntoView (element) {
6 if (element){
7 const scrollY = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
8 window.scroll({ top: scrollY, left: 0, behavior: 'smooth' });
9 }
10}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

72scrollIntoView (element: HTMLElement) {
73 if (!this._container) {
74 throw new Error('A container must be set on the scroller with `scroller.setContainer(container)` before trying to scroll an element into view')
75 }
76
77 if (this._isFullyVisible(element)) {
78 return
79 }
80
81 // aim to scroll just into view, so that the bottom of the element
82 // is just above the bottom of the container
83 let scrollTopGoal = this._aboveBottom(element)
84
85 // can't have a negative scroll, so put it to the top
86 if (scrollTopGoal < 0) {
87 scrollTopGoal = 0
88 }
89
90 this._userScroll = false
91 this._container.scrollTop = scrollTopGoal
92}
1export default function scrollIntoView(element) {
2 const scroller = getScrollParent(element);
3
4 if (!scroller) {
5 return;
6 }
7
8 const scroll = scroller.scrollTop;
9 const elementTop = getOffset(element).top;
10 const scrollerTop = getOffset(scroller).top;
11 const elementBottom = elementTop + element.offsetHeight;
12 const scrollerBottom = scrollerTop + scroller.clientHeight;
13 const outOfBoundsTop = elementTop - scrollerTop < 0;
14 const outOfBoundsBottom = elementBottom > scrollerBottom;
15
16 if (outOfBoundsTop) {
17 scroller.scrollTop = scroll + (elementTop - scrollerTop);
18 } else if (outOfBoundsBottom) {
19 scroller.scrollTop = scroll + (elementBottom - scrollerBottom);
20 }
21}
12function scrollIntoView(container, selected) {
13 if (_vue2.default.prototype.$isServer) return;
14
15 if (!selected) {
16 container.scrollTop = 0;
17 return;
18 }
19
20 var offsetParents = [];
21 var pointer = selected.offsetParent;
22 while (pointer && container !== pointer && container.contains(pointer)) {
23 offsetParents.push(pointer);
24 pointer = pointer.offsetParent;
25 }
26 var top = selected.offsetTop + offsetParents.reduce(function (prev, curr) {
27 return prev + curr.offsetTop;
28 }, 0);
29 var bottom = top + selected.offsetHeight;
30 var viewRectTop = container.scrollTop;
31 var viewRectBottom = viewRectTop + container.clientHeight;
32
33 if (top < viewRectTop) {
34 container.scrollTop = top;
35 } else if (bottom > viewRectBottom) {
36 container.scrollTop = bottom - container.clientHeight;
37 }
38}
78function scrollIntoView(element) {
79 var viewportTop = (document.body.scrollTop +
80 document.documentElement.scrollTop);
81 var viewportHeight = window.innerHeight;
82 var elementBox = element.getBoundingClientRect();
83 var pixelsToOverlap = elementBox.bottom - elementBox.top + 8;
84
85 var scrollTo;
86 if (elementBox.top < 0) {
87 scrollTo = viewportTop +
88 pixelsToOverlap + elementBox.bottom - viewportHeight;
89 } else if (elementBox.bottom > viewportHeight) {
90 scrollTo = viewportTop + elementBox.top - pixelsToOverlap;
91 } else {
92 return;
93 }
94
95 scrollTo = Math.min(document.body.scrollHeight - viewportHeight,
96 Math.max(0, scrollTo));
97 window.scroll(document.body.scrollLeft +
98 document.documentElement.scrollLeft,
99 scrollTo);
100}
278scrollIntoView()
279{
280 const
281 {
282 scrollIntoView : shouldScrollIntoView,
283 scrollIntoViewDelay,
284 expandAnimationDuration
285 }
286 = this.props
287
288 // // For some reason in IE 11 "scroll into view" scrolls
289 // // to the top of the page, therefore turn it off for IE.
290 // if (!isInternetExplorer() && shouldScrollIntoView)
291 if (shouldScrollIntoView)
292 {
293 this.scrollIntoViewTimer = setTimeout(() =>
294 {
295 const { expanded } = this.state
296
297 // If still expanded and there are any options
298 // then scroll into view.
299 if (expanded)
300 {
301 // https://github.com/stipsan/scroll-into-view-if-needed/issues/359
302 // scrollIntoView(this.container, false, { duration: 300 })
303
304 scrollIntoView(this.container,
305 {
306 scrollMode : 'if-needed',
307 behavior : 'smooth',
308 block : 'nearest',
309 inline : 'nearest'
310 })
311 }
312 },
313 Math.max(scrollIntoViewDelay, expandAnimationDuration) * 1.1)
314 }
315}
173function scrollIntoView(node)
174{
175 var scroll = getVerticalScroll(node);
176 if (scroll != 0)
177 window.scrollBy(0, scroll);
178}
461scrollIntoView(domNode) {
462 const rootNode = this.root;
463 if (!domNode || !rootNode) {
464 return;
465 }
466
467 const rootComputedStyle = getCompStyle(rootNode);
468 const rect = domNode.getBoundingClientRect();
469 const mainRect = rootNode.getBoundingClientRect();
470
471 const { vertical } = this.props;
472 const startSideName = vertical ? 'top' : 'left';
473 const endSideName = vertical ? 'bottom' : 'right';
474
475 const startDiff =
476 rect[startSideName] -
477 (mainRect[startSideName] +
478 this.getBorderAndPaddingSize(undefined, 'start'));
479
480 const endDiff =
481 rect[endSideName] -
482 (mainRect[endSideName] - this.getBorderAndPaddingSize(undefined, 'end'));
483
484 const scrollIntoViewOffset = this.props.scrollIntoViewOffset;
485
486 if (startDiff < 0) {
487 this.doScroll(-startDiff + scrollIntoViewOffset, -1);
488 } else if (endDiff > 0) {
489 this.doScroll(endDiff + scrollIntoViewOffset, 1);
490 }
491}
19export function scrollIntoView(el: Element, scrollRoot: Element): void {
20 // eslint-disable-next-line @typescript-eslint/unbound-method
21 if (!scrollRoot.getBoundingClientRect) {
22 return el.scrollIntoView()
23 }
24
25 const rootRect = scrollRoot.getBoundingClientRect()
26 const elRect = el.getBoundingClientRect()
27
28 const elAbove = elRect.top <= rootRect.top + 30
29 const elBelow = elRect.bottom >= rootRect.bottom
30
31 if (elAbove) {
32 el.scrollIntoView(true)
33 } else if (elBelow) {
34 el.scrollIntoView(false)
35 }
36}
146scrollTo(domNode) {
147 const elem = domNode;
148 if (typeof elem.scrollIntoViewIfNeeded === "function") {
149 elem.scrollIntoViewIfNeeded();
150 }
151 else {
152 elem.scrollIntoView();
153 }
154}

Related snippets