滚动时下拉菜单跳转到焦点

Question

我正在做一个自定义下拉菜单，并且已经完成了大部分工作，包括各种导航。但是我有一个问题。

我的标记是这样的

<div class="cont">
    <input type="checkbox">
    <label>item1</label>
    <input type="checkbox">
    <label>item2</label>
</div>

当您单击向下箭头时，下一个输入会聚焦并且容器会滚动 (has overflow-y: scroll)。滚动有效，下一个项目被选中，但每次它跳到 0 然后滚动到元素。

我很确定这是焦点造成的，但我已经尝试了各种方法来避免跳跃。

执行滚动的 javascript 部分：

var step = 34 // get height of label    
easy_drop.$result.on('keydown', '.filterdrp_list_item', function (e) {
    // console.log('5')     

    if (e.keyCode === 40) { // Down                                     
        e.preventDefault();

        $("[data-filterresult]").stop().animate({
            scrollTop: "+=" + step + "px"
        }, 1);

        $(this).nextAll('.filterdrp_list_item')
            .not('[style="display: none;"]')
            .first()
            .focus(); 
    }

Answer 1

好的，我设法修复了它。它跳跃的原因是，我所有的输入都在顶部，因为它们是绝对位置。因此我包装了我跨越的所有项目，所以一个跨度将包括第一个输入和它们的标签。

通过进行这些更改，我也不需要 scrolltop javascript，因为原生 html 工作正常

很有帮助。因为我还必须对 CSS 和 JS 进行更改，以获得新的更改。

滚动时下拉菜单跳转到焦点

Dropdown jumps on focus when scrolling

javascript

scroll

focus