I have a function that use a HTML select element. It works by each option having number value. When the option is click I use that number to scroll to a div.

Something like this:

var options = document.getElementsByTagName("option");
var divs = document.getElementsByTagName("div");

function test() {
  var t = parseInt(this.value);
  divs[t].scrollIntoView({
    block: "center",
    behaviour: "smooth"
  });
}

window.addEventListener("load", function() {
  for (var i = 0; i < options.length; i++) {
    options[i].addEventListener("click", test);
  }
});

div{
height:50vh;
}

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

I have a function that use a HTML select element. It works by each option having number value. When the option is click I use that number to scroll to a div.

Something like this:

var options = document.getElementsByTagName("option");
var divs = document.getElementsByTagName("div");

function test() {
  var t = parseInt(this.value);
  divs[t].scrollIntoView({
    block: "center",
    behaviour: "smooth"
  });
}

window.addEventListener("load", function() {
  for (var i = 0; i < options.length; i++) {
    options[i].addEventListener("click", test);
  }
});

div{
height:50vh;
}

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

This works in Firefox and IE but not in chrome. The options have the function attached but when I click them nothing happens.

• javascript
• html

• 1 What does the F12 developer console tell you about errors and warnings? – Dave S Commented Dec 7, 2018 at 17:34
• Please define "not working". – Teemu Commented Dec 7, 2018 at 17:44
• @Teemu not scrolling into view. I'm on Linux and Chrome not Scroling; Firefox scrolling but ignores smooth behavior. – Smollet777 Commented Dec 7, 2018 at 17:46
• But that is not supported in IE either. – Teemu Commented Dec 7, 2018 at 17:47
• 2 It looks like the click event is not fired by option elements in Chrome. I'm surprised this actually works in IE ... Maybe listening onchange on the select element would do in Chrome too ..? – Teemu Commented Dec 7, 2018 at 17:56

4 Answers 4

I also had this problem in Chrome. This helped, put at the end of the page and into a separate script element:

<script>
    window.setTimeout( ()=>{ window.scrollTo(0,0) }, 50 );
</script>

If you want to call scrollIntoView() onwheel, you have to cancel the default action (if you don't cancel the default action, you can't scrollIntoView() because the browser is already scrolling a little bit, so the scrollIntoView function doesn't do anything). To cancel the default action, you have to use e.preventDefault() in the callback function. However, the wheel event is by default not cancellable. To make the event cancellable, you can set the passive attribute to false on options. Here's a working solution :

document.addEventListener('wheel', wheelListener, {passive: false}); 
function wheelListener(e){
    e.preventDefault();
    mySecondDiv.scrollIntoView(); // works !
}

Here I have the example code here: https://codepen.io/danieldd/pen/ZVzvYB

Its working fine in chrome, maybe if you can share the logs or your chrome version.

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

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: 400px;
    margin: 16px;
}

I had the scrolling failure in a different situation: call scrollIntoView with smooth behavior and after that, set the focus to the parent element for further keyboard scroll. The solution was to focus the parent element before calling scrollIntoView.