上下滚动键滚动内部div [英] Scrolling inner div on key down and up

问题描述

我已经构建了一个自动完成容器，其中显示了前四个结果，其余的则被隐藏，并且在滚动包含所有结果的内部div元素时可以看到.

I have build an autocomplete container which displays the first four results and the rest are hidden and can be seen when scrolling the inner div element which holds all the results.

我已经实现了在按下向上和向下键时的on键，以使用户可以轻松浏览结果，但结果的内部div不会滚动.

I have implemented the on key up when pressing the up and down keys in order to let the users navigate easily through the results but the inner div with the results isn't scrolling.

如何滚动具有 overflow-y:hidden 而不是窗口的元素?

How can you scroll an element which has overflow-y:hidden and not the window ?

此处的jsFiddle示例

在该示例中，只需按输入框内的任意键，然后使用箭头向下，您将看到div不在滚动

In the example , just press any key inside the input box and use your arrows to go down, you will see that the div isn't scrolling

推荐答案

您可以更新脚本以查找所选元素的相对位置并滚动至该位置:

You can update your script to find the relative position of the selected element and scroll to it:

$(".someInput").on("keyup", function(e) {
   $(".wrapper").show(); 
    if (e.which == 40) {
        $('.element:not(:last-child).element-hover').removeClass('element-hover').next().addClass('element-hover');
    } else if (e.which == 38) {
        $('.element:not(:first-child).element-hover').removeClass('element-hover').prev().addClass('element-hover');    
    }
    //scroll to element:
    $(".wrapper .inner_div").scrollTop(0);//set to top
    $(".wrapper .inner_div").scrollTop($('.element-hover:first').offset().top-$(".wrapper .inner_div").height());//then set equal to the position of the selected element minus the height of scrolling div
});

http://jsfiddle.net/kMzR9/3/

这篇关于上下滚动键滚动内部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！