如何使用 scrollIntoView() 从可见区域的顶部或底部显示一个项目？

Question

我想在使用带有导航按钮（向上和向下）的 scrollIntoView() 时显示两个项目，让用户知道有要导航的项目，但第一个和最后一个项目应该有默认行为，所以用户知道这是列表的末尾。

希望这张图片对您有所帮助：

这是我的代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
.myList{
    width: 100px;
    height: 100px;
    margin: 5px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
    background-color: gray;
    list-style: none;
}
button{
    width: 40px;
    margin: 0 5px;
}
.myList>*{
    display: block;
    padding: 5px;
}

.focused{
    background-color: yellow;
    color: black;
}

<html>
  <body>
    <ul class="myList">
      <li data-nav="0">Item 1</li>
      <li data-nav="1">Item 2</li>
      <li data-nav="2">Item 3</li>
      <li data-nav="3">Item 4</li>
      <li data-nav="4">Item 5</li>
      <li data-nav="5">Item 6</li>
      <li data-nav="6">Item 7</li>
    </ul>
    <button onclick="move(true)">UP</button>
    <button onclick="move(false)">down</button>
    
    <script>
        let nav = document.querySelectorAll("[data-nav]");
        nav.forEach(el=>{
            el.classList.remove("focused");
        })
        nav[0].classList.add("focused");

        let focusedIndex = 0;
        function move(dir){
            if(dir && focusedIndex > 0) focusedIndex--;
            else if(!dir && focusedIndex < 6) focusedIndex++;
            nav.forEach(elem =>{
                elem.classList.remove("focused");
            })
            nav[focusedIndex].classList.add("focused");
            nav[focusedIndex].scrollIntoView(true);
        }
    </script>
  </body>
</html>

Answer 1

首先你需要出现前一个元素

如果我们点击向上按钮并且当前索引不是第一个元素，在这个雕像我们需要 滚动到上一个 元素并 添加焦点 class 到当前元素

let nav = document.querySelectorAll("[data-nav]");
            nav.forEach((el) => {
                el.classList.remove("focused");
            });
            nav[0].classList.add("focused");

            let focusedIndex = 0;
            function move(dir) {
                if (dir && focusedIndex > 0) focusedIndex--;
                else if (!dir && focusedIndex < 6) focusedIndex++;
                nav.forEach((elem) => {
                    elem.classList.remove("focused");
                });
                /*
                check if we click in up button and will not arrive to last one
                [1] add foucs to current index
                [2] scroll to prev current index
                */
                if(dir && nav[focusedIndex].dataset.nav != 0) {
                    nav[focusedIndex].classList.add("focused");
                    nav[focusedIndex-1].scrollIntoView(true);
                }
                /*
                    if we click in down button dont do any thing differnt because we already can see 
                    another items or the first condition return flase because this already the 
                    first element
                */
                else {
                    nav[focusedIndex].classList.add("focused");
                    nav[focusedIndex].scrollIntoView(true);
                }

            }

如何使用 scrollIntoView() 从可见区域的顶部或底部显示一个项目？

how to show one more item from top or bottom of visible area with scrollIntoView()?

javascript

css

scroll