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

user_11426776 0
Viewed 6898
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)

smooth-scrolling javascript
4 Answers

I found a solution to this problem

  1. open a new tab

  2. type "chrome://flags" and hit enter

  3. in search bar search for "smooth scrolling"

  4. enable it and reload

And done

user_128868060

Now there is a css property to achieve the same

scroll-behavior: smooth;

Although at the time of this writing browser compatibility is not as good as the js solution.

user_86468610

just a typo, property must be behavior instead behaviour.

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

dropdownElement.addEventListener('change', function(ev) {
  var containerChoosed = document.getElementById('container_' + this.value);
  containerChoosed.scrollIntoView({
    block: "center",
    behavior: "smooth"
  });
});
div {
  border: 1px solid;
  height: 40px;
  margin: 16px;
}

hr {
  height: 40px;
}

select {
  position: fixed;
  top: 0;
  left: 0;
}
  
#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>
  <hr />
  <hr />
  <hr />
  <hr />
  <hr />
  <div id="container_2">div 2</div>
  <hr />
  <hr />
  <hr />
  <hr />
  <hr />
  <div id="container_3">div 3</div>
  <hr />
  <hr />
  <hr />
  <hr />
  <hr />
  <div id="container_4">div 4</div>

</body>

</html>

user_22749110

This looks like an issue in Chrome itself : https://bugs.chromium.org/p/chromium/issues/detail?id=648446

this example could work well in Firefox ,but not in Chrome (both Windows and Mac, and Chrome and Ms Edge） :

<div class="container">
  <div class="fixedBox">
    <a class="button" href="#app1">anchor1</a>
    <a class="button" href="#app2">anchor2</a>
    <a class="button" href="#app3">anchor3</a>
  </div>
  <div id='app1'>text1</div>
  <div class="box"></div>
  <div id='app2'>text2</div>
  <div class="box"></div>
  <div id='app3'>text3</div>
</div>
.fixedBox {
  position: fixed;
  bottom: 100px;
  right: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  display: flex;
  margin: 10px;
  height: 30px;
  width: 80px;
  border-radius: 5px;
  background-color: rgb(6, 205, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.box {
  width: 100px;
  height: 2600px;
  background: linear-gradient(rgb(252, 158, 247), rgb(2, 217, 255));
}
div {
  user-select: none;
}
html {
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
user_15562990
Related