Automatic scroll on div on li element overflow

Question

i'm trying to apply automatic scroll in div. I have a list of element under fixed height div now i want when i press key down after 3rd highlight li element (i.e Compt0005) div scroll automatically. can any body solve it..

Demo:- here

score 3 · Answer 1 · answered Aug 21 '13 at 13:58

3

change every occurence of

$("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red")

to

 $("#ulSearch li:eq(" + liPossition + ")").css("background-color", "red")[0].scrollIntoView();

answered Aug 21 '13 at 13:58

Moazzam Khan

3,130
2
20
35

It's work fine but it scroll on every li but i want scroll after 3rd element – Ajay Rawat Aug 21 '13 at 14:03
in that case it wont be simple, you have to check if he element is in the view or not, and then have to scroll. – Moazzam Khan Aug 21 '13 at 14:05
may be you want to check this also - [http://stackoverflow.com/questions/4884839/how-do-i-get-a-element-to-scroll-into-view-using-jquery] – Moazzam Khan Aug 21 '13 at 14:20

Stano · Accepted Answer · 2013-08-22T08:34:39.380

3

This code sets the scrollTop property of the div exactly via .getBoundingClientRect() method:

$(function () {
    var liPossition = 0;
    var items = $("#ulSearch li");
    var divSearchContent = $("#divSearchContent");
    divSearchContent.hide();
    $("#txtSearch").keydown(function (e) {
        if (e.keyCode == 13) { // if enter pressed
            $("#txtSearch").val(items.eq(liPossition).text());
            divSearchContent.hide();
            return;
        }
        if (e.keyCode != 38 && e.keyCode != 40) { // // if not up or down arrow
            return;
        }
        divSearchContent.show();
        items.eq(liPossition).css("background-color", "");
        if (e.keyCode == 40 && liPossition < items.length - 1) { // down arrow key code
            liPossition++;
        }
        if (e.keyCode == 38 && liPossition > 0) { // up arrow key code
            liPossition--;
        }
        items.eq(liPossition).css("background-color", "red");//[0].scrollIntoView(); return;
        var b1 = divSearchContent[0].getBoundingClientRect();
        var b2 = items.eq(liPossition)[0].getBoundingClientRect();
        if (b1.top>b2.top) {
            divSearchContent.scrollTop( divSearchContent.scrollTop()-b1.top+b2.top );
        }
        else if (b1.bottom<b2.bottom) {
            divSearchContent.scrollTop( divSearchContent.scrollTop()-b1.bottom+b2.bottom );
        }
    });
});

JSFiddle

edited Aug 22 '13 at 08:34

answered Aug 21 '13 at 16:34

Stano

8,749
6
30
44

Nice 1 this answer is work better for me – Ajay Rawat Aug 21 '13 at 17:16
can you also reset process when click rather than text box. – Ajay Rawat Aug 22 '13 at 05:14
It show error in my page "Cannot call method 'getBoundingClientRect' of undefined " – Ajay Rawat Aug 22 '13 at 05:59
Hello Ajay, maybe something like this? http://jsfiddle.net/6aj7t/19/ http://jsfiddle.net/6aj7t/19/show Used also `.focus()` function ;-) – Stano Aug 22 '13 at 06:59
alternatively you can add/remove the class instead of changing the background: http://jsfiddle.net/6aj7t/20/ – Stano Aug 22 '13 at 07:12
It is show error on my code on this line "var b1 = divSearchContent[0].getBoundingClientRect();" Err="Cannot call method 'getBoundingClientRect' of undefined " – Ajay Rawat Aug 22 '13 at 07:34
it show the content of divSearchContent – Ajay Rawat Aug 22 '13 at 07:42
No, i run this code in chrome – Ajay Rawat Aug 22 '13 at 07:44
there are some error on this code... 1) first time when key down second li element highlight rather than first 2) last element not shown after scrolling – Ajay Rawat Aug 22 '13 at 08:17

Automatic scroll on div on li element overflow

2 Answers2