Как поставить «li» поверх «ul», если переполнение включено?

Question

Как поставить «li» поверх «ul», если переполнение включено?

0

У меня есть ul которая имеет свойство overflow: auto CSS overflow: auto.

Теперь, в определенный момент, каждый li подсвечивается по одному, основываясь на некотором взаимодействии с пользователем. Я хотел бы поместить выделенный выделенный li вверху окна прокрутки, если это возможно.

Я просмотрел функцию jQuery scrollTo, но я не думаю, что это сработало бы здесь, или, может быть, я не могу заставить ее работать здесь.

Каким-либо другим способом я могу достичь этой функциональности?

Вот несколько обновленных кодов.

function next_song() {
    if (song_counter == playlist.length - 1) {
        song_counter = 0;
    } else {
        song_counter++;
    }
    var audio = $("#audio");
    var myLi = document.getElementById('play_list').getElementsByTagName('li');
    for (var i = 0; i < (myLi.length); i++) {
        myLi[i].style.background = "none";
        myLi[i].style.color = "white";
    }
    $("li").eq(song_counter).css("background", "white");
    $("li").eq(song_counter).css("color", "black");
    nowplaying.innerHTML = song_list[song_counter];
    $("#mp3source").attr("src", playlist[song_counter]);
    audio[0].pause();
    audio[0].load();
}

Как можно видеть, я выделяю конкретный элемент li который может или не может быть виден внутри окна прокрутки. Я бы хотел прокрутить элемент ul до тех пор, пока не появится этот конкретный элемент li.

Kanishka Ganguly 02 март 2014, в 17:54

Источник

2

пожалуйста, предоставьте соответствующий код
A. Wolff 02 март 2014, в 16:21
2

Непонятно, что вы пытаетесь сделать.
Paulie_D 02 март 2014, в 16:22
0

Вы хотите показать элемент, который переполняет его родитель? Правильно?
Ashish Mishra 02 март 2014, в 16:29

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

2 ответа

0

Лучше сделать прокрутку в div, а не в элементе ul:

var topPosition = $("#liId").position().top;
$('#scrollingDiv').scrollTop(topPosition);

вот рабочий код с помощью scrollTop, с которым вы можете играть и использовать (его не оптимальный код): http://jsfiddle.net/pJLK8

Sari Alalem 02 март 2014, в 14:00

Ещё вопросы

пожалуйста, предоставьте соответствующий код
Непонятно, что вы пытаетесь сделать.
Вы хотите показать элемент, который переполняет его родитель? Правильно?

A. Wolff · Accepted Answer · 2014-03-02T14-24-00.000Z

Вы должны использовать собственный scrollIntoView():

$('.highlighted').get(0).scrollIntoView();

Если не то, что вы ищете, подумайте о том, чтобы улучшить вопрос.

ДЕМО jsFiddle

Чертовски хороший ответ. : D Спасибо большое!