10 examples of 'scrollintoview react' in JavaScript

5
function 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
}

72
scrollIntoView (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
}

1
export 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
}

12
function 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
}

78
function 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
}

278
scrollIntoView()
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
}

173
function scrollIntoView(node)
174
{
175
	var scroll = getVerticalScroll(node);
176
	if (scroll != 0)
177
		window.scrollBy(0, scroll);
178
}

461
scrollIntoView(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
}

19
export 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
}

146
scrollTo(domNode) {
147
    const elem = domNode;
148
    if (typeof elem.scrollIntoViewIfNeeded === "function") {
149
        elem.scrollIntoViewIfNeeded();
150
    }
151
    else {
152
        elem.scrollIntoView();
153
    }
154
}