Прокрутка до элемента внутри div - PullRequest
Новая
       21

Прокрутка до элемента внутри div

3 голосов
/ 16 сентября 2010

У меня есть абсолютно позиционированный div, который действует как модальное окно в центре страницы. Модальное окно имеет вертикальную прокрутку с полосой прокрутки с правой стороны. Сама страница также имеет вертикальную прокрутку с полосой прокрутки справа. Я хотел бы иметь возможность щелкнуть ссылку и прокрутить модальное окно к связанному элементу.

Я могу добиться этого, используя target.scrollIntoView (); но вся страница прокручивается вместе с модальным окном - мне бы хотелось, чтобы страница не двигалась и имела только модальную прокрутку окна. Если я использую scrollIntoView (false), то сама страница не прокручивается, в то время как модальное окно - прокручивается, но целевой элемент находится внизу окна, а я бы хотел, чтобы он был вверху.

Есть ли какой-нибудь способ, которым я могу вручную сместить положение цели в div? то есть, если я использую scrollIntoView (false), цель отображается в нижней части div - если бы я мог затем сместить ее на высоту окна просмотра, я бы смог переместить ее наверх ..?

Примечание. Я не могу использовать для этого JQuery или подобное.

Заранее спасибо за любую помощь.

Ответы [ 2 ]

5 голосов
/ 17 сентября 2010

Вот живая демонстрация, которая, я думаю, делает то, что вы ищете: http://jsfiddle.net/QN3mK/

Код для этого: (чаще проверяйте функцию scrollFunc()) 

function scrollFunc() {
    var est = document.getElementById('est');
    var docPos = f_scrollTop();
    est.scrollIntoView();
    window.scrollTo(0,docPos);
}

function f_scrollTop() {
    return f_filterResults (
        window.pageYOffset ? window.pageYOffset : 0,
        document.documentElement ? document.documentElement.scrollTop : 0,
        document.body ? document.body.scrollTop : 0
    );
}

function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
        n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

Вторые две функции - это просто кросс-браузерный совместимый способ получения текущей позиции прокрутки страницы. Так что это делает, чтобы найти элемент (предположительно внутри прокручиваемого div), получает текущую позицию прокрутки страницы, прокручивает элемент в представление (который поместит его в верхнюю часть прокручиваемого div), а затем сбрасывает позицию страницы обратно туда, где это было. Возможно, не идеальное решение, но оно выполнит свою работу.

0 голосов
/ 16 сентября 2010

Вы можете поэкспериментировать с назначением целочисленных значений свойству scrollTop.

...