In most modern browsers (Chrome and Firefox, but not Safari, UC, or IE) you can pass options in an object to .scrollIntoView(). Try this: elm.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ }) Other values are behavior: ‘instant’ or block: ‘start’ or block: ‘end’. See https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView
Element.scrollIntoView() Element.scrollIntoView() method scrolls the element on which it’s called into the Viewport of the browser window. Syntax element.scrollIntoView() element.scrollIntoView(alignToTop) // Boolean parameter element.scrollIntoView(scrollIntoViewOptions) // Object parameter Parameters The parameters for this method are: alignToTop (Optional): Is a Boolean value, if true, the top of the element will be aligned to the top of the … Read more
I can’t answer the “should you” part of whether to use refs for this instead other than if you do, you don’t need those id values unless you use them for something else. But here’s how you would: Use useRef(null) to create the ref. const activeSlideRef = useRef(null); Put it on the Slide that’s currently … Read more
Is there a way to have an offset and make it scroll smoothly? #Yes, but not with scrollIntoView() The scrollIntoViewOptions of Element.scrollIntoView() do not allow you to use an offset. It is solely useful when you want to scroll to the exact position of the element. You can however use Window.scrollTo() with options to both … Read more
It is supported yes, but user experience is… bad. As @9bits pointed out, this has long been supported by all major browsers. Not to worry about that. The main problem is the way that it works. It simply jumps to a particular element that may as well be at the end of the page. By … Read more
There is no scrollEnd event, but you can listen for the scroll event and check if it is still scrolling the window: var scrollTimeout; addEventListener(‘scroll’, function(e) { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(function() { console.log(‘Scroll ended’); }, 100); });
Element.scrollIntoView() Element.scrollIntoView() method scrolls the element on which it’s called into the Viewport of the browser window. Syntax: element.scrollIntoView() element.scrollIntoView(alignToTop) // Boolean parameter element.scrollIntoView(scrollIntoViewOptions) // Object parameter Your usecases: executeScript(“arguments[0].scrollIntoView();”, Element): This line of code will scroll the element into the visible area of the browser window. executeScript(“arguments[0].scrollIntoView(true);”, element1): This line of code will scroll … Read more
jQuery isn’t necessary. Most of the top results I got from a Google search gave me this answer: window.scrollTo(0, document.body.scrollHeight); Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use it’s scroll height instead. window.scrollTo(0, document.querySelector(“.scrollingContainer”).scrollHeight); You can tie that to the … Read more