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进行新的更改。

滚动时下拉跳转焦点

1 个答案: