scrollintoview is not working in chrome version=81. Behaviour smooth is not happening

Question

if (document.querySelector(target)) {
  event.preventDefault();
  document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
}

above scrollIntoView behaviour smooth is not working even though event.preventDefault is used to avoid default anchor tag behavior. Functionality works in IE and firefox but not in chrome version>=81

var dropdownElement = document.getElementById('dropdown');

dropdownElement.addEventListener('change', function(ev) {
  var containerChoosed = document.getElementById('container_' + this.value);
  containerChoosed.scrollIntoView({
    block: "center",
    behaviour: "smooth"
  });
});

div {
  border: 1px solid;
  height: 400px;
  margin: 16px;
}

#container_1 {
  background-color: yellow;
}

#container_2 {
  background-color: blue;
}

#container_3 {
  background-color: green;
}

#container_4 {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<select id="dropdown">
	  <option value="1">Div 1</option>
	  <option value="2">Div 2</option>
	  <option value="3">Div 3</option>
	  <option value="4">Div 4</option>
	</select>

	<div id="container_1">div 1</div>
	<div id="container_2">div 2</div>
	<div id="container_3">div 3</div>
	<div id="container_4">div 4</div>

</body>
</html>

As you can see when any of the div is selected in dropdown it scrolls to the corresponding div, but the smooth behaviour is not working only in chrome and the version of chrome is Version 81.0.4044.138 (Official Build)

Uzair Saiyed · Accepted Answer

I found a solution to this problem

open a new tab
type "chrome://flags" and hit enter
in search bar search for "smooth scrolling"
enable it and reload

And done

scrollintoview is not working in chrome version>=81. Behaviour smooth is not happening

Tags:

javascript

smooth-scrolling

harshith bettaswamy

1 Answers

Uzair Saiyed

Recent Activity

Donate For Us