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)

`scrollINtoView` had has long bug-history in Chrome, some of them are [still open](https://bugs.chromium.org/p/chromium/issues/list?q=scrollintoview&can=2) for now. In some cases it is possible to find workaround almost every time. Would you like to add runnable demo for your case? — Kyr, May 19 '20 at 07:51

score 6 · Answer 1 · answered May 06 '21 at 17:03

6

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

answered May 06 '21 at 17:03

Uzair Saiyed

575
1
6
16

5

chrome://flags/#smooth-scrolling =) – oCcSking Jun 28 '21 at 11:38
This is more of a hack than a solution. – codingexplorer Jun 06 '23 at 18:11
@codingexplorer call it whatever you want but this is the way to make it work, as a dev you already did your job, but if the user hasn't enabled it then it's of no use right? So this is mandatory if you wanna use it in your app, so it's the part of the solution, if not the solution... – Uzair Saiyed Jun 07 '23 at 19:07
This will not fix the problem on any other computer and it is not possible to force this flag on any other computer. So this is local hack and not an actual solution to the problem. You cannot ask users of your site to enable this flag. – Swayok Aug 14 '23 at 11:26

score 5 · Answer 2 · answered Jun 01 '21 at 18:54

5

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.

answered Jun 01 '21 at 18:54

Mishel Tanvir Habib

1,112
11
16

It is wise to use both scroll-behavior and { behavior: 'smooth' }. Works quite good and you even do not need to know exact scrollable container (no need to store ref of scrollable container in React) – Swayok Aug 14 '23 at 11:22

Kyr · Answer 3 · 2020-05-19T22:05:02.157

3

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>

edited May 19 '20 at 22:05

answered May 19 '20 at 18:04

Kyr

887
7
11

2

even though after adding behavior instead of typo behaviour , smooth scroll is not happening, instead its directly jumping to the div. Ran the code snippet of yours and the same issue still exists. smooth scrolling is not happening – harshith bettaswamy May 19 '20 at 20:58
this is probably one of the most unpleasant aspects in web development, the appearance of defects that are inaccessible for debugging and correction. I checked this snippet in Chrome 81.0.4044.122, it worked as expected. – Kyr May 19 '20 at 21:48
I may propose check it in: latest Chrome (Chromium) version, also in Chrome incognito window, some extensions may affecting in such way/ – Kyr May 19 '20 at 22:16
unfortunately i am facing the same issue in incognito, my chrome version is 81.0.4044.138 . and i am not supposed to downgrade. If possible can you please install the same chrome version and give it a try? – harshith bettaswamy May 20 '20 at 07:32
also i noticed in older versions of chrome the smooth-scroll is working fine – harshith bettaswamy May 20 '20 at 08:20
Check in `Version 81.0.4044.138 (Official Build) (64-bit)` - work as expected. – Kyr May 20 '20 at 10:38

user1566268 · Answer 4 · 2022-01-18T13:56:40.183

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;
}

score -1 · Answer 5 · answered Dec 13 '22 at 03:17

(A workaround):

$('html, body').animate({
    scrollTop: $("#elementId").offset().top
}, 1000);

https://web.archive.org/web/20210506135858/https://www.abeautifulsite.net/posts/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

<- StackOverflow: scrollintoview animation

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

5 Answers5

Linked