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

【问题标题】：How to keep scrolling from jumping over items in the list using jquery?如何防止滚动使用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 示例？

标签： jquery

【解决方案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');

        }
    });
});

【讨论】：