如何防止滚动使用jquery跳过列表中的项目？

Posted 2023-02-22

【中文标题】如何防止滚动使用jquery跳过列表中的项目？

【英文标题】：How to keep scrolling from jumping over items in the list using jquery?

【发布时间】：2011-10-01 08:55:13

【问题描述】：

如何使用 jquery 防止滚动跳过列表中的项目？使用鼠标将鼠标悬停在列表中的列表项上时我没有问题。但是当使用向上/向下箭头键滚动列表时，某些项目会被跳过或看起来被跳过。

例如，如果选定的项目是第 6 项，则在使用向上箭头键时可以跳过下一个序列项（第 5 项）。

项目 1 第 2 项 第 3 项 第 4 项 第 5 项 第 6 项

$(document).ready(function()
    $('li').hover(function()
        j = $(this).parents("ul").find("li").index($(this));
        $('.hoverColor').removeClass('hoverColor');
        $(this).addClass('hoverColor');
    ); 
    j = -1;
    $(document).keyup(function(e) 
        if(e.keyCode == 38) // The Up arrow key 
        
            if(--j>0) 
                j = 0;
            
            $("li").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');
         else if (e.keyCode == 40) 
            if(++j  >$("li", "ul").length-1)
                j = $("li", "ul").length-1;
            
            $("li","ul").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');

        
    );
);

这是html代码

测试重点

$(文档).ready(函数() $('li').hover(函数() j = $(this).parents("ul").find("li").index($(this)); $('.hoverColor').removeClass('hoverColor'); $(this).addClass('hoverColor'); ); j = -1; $(document).keyup(function(e) if(e.keyCode == 38) // 向上箭头键 if(--j$("li", "ul").length-1) j = $("li", "ul").length-1; $("li","ul").removeClass('hoverColor'); $("li:eq(" + j + ")","ul").addClass('hoverColor'); // var str = $("li:eq(" + j + ")","ul").text(); // $("li:eq(" + j + ")","ul").scrollTop(str2.top); // $("#textArea").insertAtCaret(str); ) );

.hoverColor 背景颜色：#408080; 白颜色; 李 列表样式类型：无； 列表样式位置：内部； 文本对齐：左； 左边距：8px； 填充：0px div 溢出：滚动； 宽度：200px； 高度：300px；

测试 1 测试 2 测试 3 测试 4 测试 5 测试 6 测试 7 测试 8 测试 9 测试 1 测试 2 测试 3 测试 4 测试 5 测试 6 测试 7 测试 8 测试 9

【问题讨论】：

您能否在问题中包含一个 HTML 示例？

【参考方案1】：

$(document).ready(function()
    $('li').hover(function()
        j = $(this).parents("ul").find("li").index($(this));
        $('.hoverColor').removeClass('hoverColor');
        $(this).addClass('hoverColor');
    ); 
    j = -1;
    $(document).keyup(function(e) 
        if(e.keyCode == 38) // The Up arrow key 
        
          //  if(--j>0) 
          //      j = 0;
          //  
            $("li").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');
         else if (e.keyCode == 40) 
            if(++j  >$("li", "ul").length-1)
                j = $("li", "ul").length-1;
            
            $("li","ul").removeClass('hoverColor');
            $("li:eq(" + j + ")","ul").addClass('hoverColor');

        
    );
);