Stack Overflow
Stack Overflow

Questions tagged [js-scrollintoview]

The Element.scrollIntoView() method scrolls the current element into the visible area of the browser window.

Syntax

element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument

MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Can I use?

desktop

mobile

A good answer on SO

Demo

https://jsbin.com/cuweho

162 questions
6
votes
2 answers

scrollIntoView() doesn't scroll anywhere

I can't get Element.scrollIntoView() to work. I have the code below. There are two locations that it should scroll to, depending on some variable. However, it doesn't scroll to either of them. What am I doing wrong? class Page extends Component { …
Nick
  • 3,496
  • 7
  • 42
  • 96
6
votes
3 answers

React: [useRef, scrollIntoView,] How to only autoscroll a specific div inside of an overflowing page?

As you can see in my example const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); function App() { const items = ["this", "that", "those", "them", "these", "thisins"]; const messagesRef =…
bauervision
  • 847
  • 2
  • 9
  • 25
6
votes
1 answer

React Hooks - Passing ref to child to use ScrollIntoView

I have two components. A parent and a child. Inside the parent component I have a button. If the user clicks on that button I want to do a ScrollIntoView to another button inside the child component. I guess I want to define a reference to the…
Zeliax
  • 4,987
  • 10
  • 51
  • 79
5
votes
1 answer

Element.scrollIntoView() method animation speed too slow in Chrome

Is there any way to adjust Element.scrollIntoView() scrolling speed with defined transition animation as behavior: "smooth". Somehow, scrolling is too slow in Chrome, but fine in Firefox.
ogostos
  • 1,435
  • 2
  • 20
  • 29
5
votes
2 answers

Triggering imperative animations using React Refs

from the documentation, there's this use case for Refs: Triggering imperative animations. Can someone offer an example on how this should be done please? I'm trying to bring the user attention to a div after having scrolled it into view using its…
Sammy
  • 3,395
  • 7
  • 49
  • 95
5
votes
0 answers

Element.scrollIntoView not working outside of a timeout in Chrome

I have a really strange problem using scrollIntoView. In and Safari and Chrome the code works when I open a new window or tab, but does not work when I push the Refresh button. In Firefox it always works. When I use a setTimeout() the Refresh button…
Yason
  • 340
  • 2
  • 11
4
votes
2 answers

MoveTargetOutOfBoundsException problem with chromedriver version >74

I don't know why ActionChains move_to_element() is not working with chromedriver >74. (But it works on chromedriver 74 and geckodriver.) Even though I add these three line before ActionChains, it still failed to move to…
Yun
  • 1,032
  • 7
  • 20
4
votes
0 answers

Google chrome scroll lag when calling scrollintoview multiple times

I'm using Javascript scrollIntoView function to scroll a container so that the element that is currently on focus, appears in the center of the container. I'm using addEventListener to listen to arrow keys to change which element I want to be on…
COLD Crypto
  • 91
  • 1
  • 1
  • 4
4
votes
0 answers

how to scrollIntoView in angular while having angular animation router transitions?

I have a page with a list of items on it. Where when you click on item, you will activate routerlink and you will be transferred to the other page on specific scroll location. but recently I have added angular animations to all transitions on my…
GreedyAi
  • 2,709
  • 4
  • 29
  • 55
3
votes
0 answers

Strange behavior with scrollIntoView on my website

I'm just finishing my website made with react and typescript and I noticed weird behavior of my navbar. I use element.scrollIntoView to move screen to specific part of the website using element's id but sometimes it scrolls just a little bit down…
Neidd
  • 61
  • 6
3
votes
0 answers

Angular - scrollIntoView resets after initially scrolling

I am using the scrollIntoView method on an element inside the ngAfterViewInit lifecycle hook. If I start debugging I can see that the scroll actually does its job initially but then the page gets reset and scrolled to the top…
David - ACA Group
  • 459
  • 4
  • 17
3
votes
1 answer

scrollIntoView whole page shifting down

I want to build an indexed letters. When I click the letter (for example A,B,C). It should be scrolling to the belongs title. I used scrollIntoView here. Everythings okey except "block:start". When I want to the scrolling to title of start, whole…
Mert
  • 474
  • 2
  • 8
  • 21
3
votes
2 answers

Reactjs Scroll to first error on form submission of a large form

I am using react with Material UI and typescript and have a form. On form submission if inputs have validation error i would like to scroll to the first input with the validation error. I have pasted the simple form code below which inject…
iaq
  • 173
  • 1
  • 2
  • 10
3
votes
2 answers

scrollIntoView() Not working on input change or blur

I have an input field that either on (blur) or on (change) triggers a function that should scroll the page to the next element block. For reasons I ignore it doesn't work, although it works fine when used on (click) with buttons. I am also sure that…
Tommazo
  • 87
  • 1
  • 11
3
votes
2 answers

How to smooth scroll up on page - Angular 7

It's supposed to be simple, but since yesterday i'm trying to smooth scroll up on the page. The scroll function works, but not the smooth scrolling. I tryed : scrollIntoView({behavior: 'smooth'}) , but it doesn't work. This is my html component …
Vinno
  • 39
  • 1
  • 6
1
2
3
…
10 11