Safari - Javascript - Скрытие / отображение Div приводит к сбросу полосы прокрутки - PullRequest
Новая
       6

Safari - Javascript - Скрытие / отображение Div приводит к сбросу полосы прокрутки

0 голосов
/ 11 апреля 2011

У меня есть HTML-документ, содержащий серию вопросов и ответов.

Каждый вопрос содержится в div. Каждый ответ содержится в div. Каждому ответу присваивается уникальный идентификатор.

Стиль CSS для каждого ответа установлен на «none» для первоначального скрытия элемента.

Когда нажимается Вопрос, div передает идентификатор соответствующего Ответа этой функции: 

function toggle(id) {
    var state = document.getElementById(id).style.display;
    if (state == 'block') {
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById(id).style.display = 'block';
    }
}

(Это переключает появление ответа Div.)

Проблема: Этот механизм хорошо работает в Safari, если полоса прокрутки находится в положении по умолчанию (вверху). В противном случае это приведет к сбросу полосы прокрутки в положение по умолчанию, что фактически разрушит полезность этого механизма на длинных страницах.

В. Есть ли способ предотвратить сброс положения полосы прокрутки?

Спасибо.

1 Ответ

2 голосов
/ 11 апреля 2011

Вы сказали, что используете 

<a href='#'>...</a>

... для вопроса.Вот в чем проблема, это ссылка, указывающая браузеру перейти в верхнюю часть страницы.У вас есть несколько вариантов его исправления:

  1. Перехватите событие click для ссылки (или ее родительского элемента и т. Д.) И отмените действие по умолчанию.Как вы это сделаете, зависит от того, как вы подключите событие.Похоже, вы уже подключили событие, так что это, вероятно, самое простое решение.Если вы используете хук в стиле onclick=, return false; выходит за пределы функции обработчика.Если вы используете addEventListener, используйте preventDefault на event, переданном в него.(Вы, вероятно, уже знаете, что большинство версий IE не поддерживают addEventListener, а скорее attachEvent; способы предотвращения дефолта также различны. Именно из-за этого я использую библиотеку, такую ​​как jQuery, Прототип , YUI , Закрытие или любой из нескольких других для сглаживания различий в браузере.)

  2. Используйте псевдопротокол javascript: вместо #, например: 

    <a href='javascript:;'>...</a>

    Псевдопротокол сообщает браузеру запустить код сценария в hrefэлемент.В приведенном выше коде это просто ; (оператор завершения), который ничего не делает.Вы, конечно, могли бы заставить его вызывать вашу toggle функцию: 

    <a href='javascript:toggle("foo");'>...</a>

  3. Не использовать a вообще.Уместно ли использовать один, зависит от того, действительно ли это концептуально ссылка , которая является полностью вашим вызовом.

...