Javascript scrollIntoView 函数在 chrome 中不起作用

Question

我有一个使用 HTML 选择元素的函数。它通过具有数值的每个选项起作用。单击该选项时，我使用该数字滚动到一个 div。

像这样:

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>

这适用于 Firefox 和 IE，但不适用于 chrome。这些选项附加了功能，但是当我单击它们时没有任何反应。

Answer 1

这里有示例代码:https://codepen.io/danieldd/pen/ZVzvYB

它在 chrome 中运行良好，也许如果您可以共享日志或您的 chrome 版本。

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