10 examples of 'scrollintoview offset' in JavaScript

Every line of 'scrollintoview offset' 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
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}
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

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}
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}
173function scrollIntoView(node)
174{
175 var scroll = getVerticalScroll(node);
176 if (scroll != 0)
177 window.scrollBy(0, scroll);
178}
277scrollIntoView(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}
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}
55export 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}
154async scrollIntoView(element) {
155 await this.driver.executeScript('arguments[0].scrollIntoView(true);', element);
156}
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}
12scrollTo(line: number, char: number): void {/**/ }

Related snippets