10 examples of 'scrollintoview offset' in JavaScript

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
}

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
}

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
}

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

277
scrollIntoView(scrollingContainer) {
278
  const range = this.lastRange;
279
  if (range == null) return;
280
  const bounds = this.getBounds(range.index, range.length);
281
  if (bounds == null) return;
282
  const limit = this.scroll.length() - 1;
283
  const [first] = this.scroll.line(Math.min(range.index, limit));
284
  let last = first;
285
  if (range.length > 0) {
286
    [last] = this.scroll.line(Math.min(range.index + range.length, limit));
287
  }
288
  if (first == null || last == null) return;
289
  const scrollBounds = scrollingContainer.getBoundingClientRect();
290
  if (bounds.top < scrollBounds.top) {
291
    scrollingContainer.scrollTop -= scrollBounds.top - bounds.top;
292
  } else if (bounds.bottom > scrollBounds.bottom) {
293
    scrollingContainer.scrollTop += bounds.bottom - scrollBounds.bottom;
294
  }
295
}

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
}

55
export default function scrollIntoViewport( element, options = {} ) {
56
	const { behavior = 'auto', block = 'start', scrollMode = 'always', ...otherOptions } = options;
57
58
	if ( ! element ) {
59
		return;
60
	}
61
62
	if (
63
		element.scrollIntoViewIfNeeded &&
64
		( behavior === 'auto' || ! SUPPORTS_SCROLL_BEHAVIOR ) &&
65
		( block === 'center' || block === 'nearest' ) &&
66
		scrollMode === 'if-needed' &&
67
		otherOptions === undefined
68
	) {
69
		// We can use `scrollIntoViewIfNeeded` if it's available, we're not doing smooth scrolling
70
		// (either because we don't want it or because it's not available in the browser),
71
		// and we only want to scroll if needed.
72
		// Also, only the 'center' and 'nearest' block modes are supported.
73
		element.scrollIntoViewIfNeeded( block === 'center' );
74
		return;
75
	}
76
77
	if ( element.scrollIntoView ) {
78
		try {
79
			// Use element.scrollIntoView if available.
80
			// This is the most complete implementation in newer browsers.
81
			// However, in older browsers it may throw an error if the options object is not supported,
82
			// or it may simply treat it as a boolean and ignore the various options.
83
			element.scrollIntoView( options );
84
			return;
85
		} catch ( error ) {
86
			// Move on to fallback.
87
		}
88
	}
89
90
	// Low fidelity implementation of scrollIntoView. Always assumes block = 'start'.
91
	fallbackScrollIntoViewport( element, behavior, scrollMode );
92
}

154
async scrollIntoView(element) {
155
  await this.driver.executeScript('arguments[0].scrollIntoView(true);', element);
156
}

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
}

12
scrollTo(line: number, char: number): void {/**/ }