Question

我有一个使用HTML select元素的函数。它通过具有数字值的每个选项起作用。单击选项时，我使用该数字滚动到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", behaviour: "smooth" });
});

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

Answer 2

在另一种情况下，我的滚动失败：以流畅的行为调用scrollIntoView，然后将焦点设置为父元素，以进行进一步的键盘滚动。解决方案是在调用scrollIntoView之前先将父元素放在焦点上。

Javascript scrollIntoView函数在Chrome中不起作用

2 个答案: