Question

我遇到了滚动div的问题。代码就像这样

HTML：

ul {height: 100px; overflow: scroll;}
li {height: 25px;}

<ul id="sub-menu-active">
    <li><li>
    <li><li>
    <li><li>
    <li><li>
    <li><li>
    <li class="current-menu-item"><li>
    <li><li>
    <li><li>
</ul>

我需要的是当页面加载时自动滚动ul＃sub-menu-item到具有其中一个类的元素是li.current-menu-item。有人可以帮我找到一个方法来做到这一点。

Answer 1

在页面加载后，从以下代码段运行脚本，将所选项目滚动到视图中：

var selected = document.querySelector('.current-menu-item');
selected.scrollIntoView();

ul {height: 100px; overflow: scroll;}
li {height: 25px;}

<ul id="sub-menu-active">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="current-menu-item">selected item</li>
    <li>item</li>
    <li>item</li>
</ul>

Answer 2

尝试将所有内容插入div：

div {overflow: scroll;}
ul {height: 100px;}
li {height: 25px;}

<div id="box">    
        <ul id="sub-menu-active">
            <li><li>
            <li><li>
            <li><li>
            <li><li>
            <li><li>
            <li class="current-menu-item"><li>
            <li><li>
            <li><li>
        </ul>
</div>

Answer 3

您可以使用scrollIntoView，但请记住在各种浏览器中Iterative Closest Point Algorithm。基本上，IE中根本不支持使用选项（如下例所示）（只需省略选项）。

<强> HTML：

<ul id="sub-menu-active">
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li id="current-menu-item">THE TEXT WE WANT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
  <li>EXAMPLE TEXT</li>
</ul>

JS：

let el = document.getElementById('current-menu-item')
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'end'
})

<强> CSS：

ul {
  height: 100px;
  overflow: scroll;
}

JSFiddle：check its compability

在div内自动滚动

3 个答案: