Как временно предотвратить прокрутку прокручиваемого элемента div?

Question

Вот моя текущая ситуация:

У меня есть веб-страница, содержащая пару прокручиваемых элементов div. Каждый из этих элементов содержит несколько объектов. Я использую YUI для отображения всплывающих меню действий, которые можно выполнить над каждым объектом. Каждый объект имеет свое собственное меню, связанное с ним, которое создается и отображается динамически. Всплывающие меню могут быть большими и могут перекрывать границы прокручиваемого элемента div.

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

Так что мне нужно, чтобы это фокусированное меню не прокручивало div. Моя идея обеспечить лучший пользовательский интерфейс состоит в том, чтобы предотвратить прокрутку этих внутренних элементов при открытом меню. Это оставляет меню, расположенное в оптимальном месте, чтобы показать пользователю, над каким элементом выполняется действие. Если пользователь хочет прокрутить поле, он может щелкнуть, чтобы закрыть меню, а затем прокрутить в обычном режиме.

Как я могу это сделать? Мне нужно решение, которое работает во всех основных браузерах.

Моей первой мыслью было прослушать событие onscroll для этого конкретного элемента. К сожалению, кажется, что не существует простого способа предотвратить прокрутку. Например, мой код события Javascript выполняется после фактической прокрутки.

Затем я подумал, что, поскольку мой код запускается после прокрутки объекта, я мог просто сбросить obj.scrollTop и obj.scrollLeft . Конечно же, похоже, что это работает, хотя я беспокоюсь, что в медленных браузерах пользователь увидит содержимое внутри div "прыжок вокруг". Также было бы неплохо, если бы количество прокручиваемого элемента было частью объекта события. Это где-то застряло? Я ищу альтернативу необходимости хранить переменные scrollTop и scrollLeft для этого элемента, а затем использовать их, пока прокрутка временно отключена.

Как лучше всего решить эту проблему?

Answer 1

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

Для этого вы можете расположить полупрозрачный div поверх рассматриваемого прокручиваемого div, который будет захватывать события мыши и визуально показывать, что прокручиваемый div на данный момент неактивен. Было бы трудно сделать кросс-браузер совместимым и не было бы идеально, но опять же очень мало подобных трюков на стороне клиента.

Answer 2

Простой ответ: нет, вы не можете этого сделать. Вдвойне нет, если вы хотите кросс-браузерное решение.

Предоставление пользователю полной возможности прокручивать что-либо, а затем отказывать ему в простом плохом дизайне пользовательского интерфейса.

Хорошо, так что после редактирования выясняется, что вы на самом деле не пытаетесь предотвратить прокрутку пользователя.

Основной ответ остается верным, хотя. Звучит так, как будто фокус собирается в прямоугольник (возможно, якорь?), Который не полностью виден и вызывает прокрутку. Есть ли причина, по которой этот прямоугольник должен получить фокус? Для доступности?

Answer 3

Я нашел способ обойти эту проблему. Удалив элемент меню из прокручиваемого элемента div и затем добавив его непосредственно в document.body, все браузеры перестают пытаться прокрутить элемент div, чтобы показать сфокусированный элемент (даже если элемент уже полностью виден).

Спасибо всем за ваше время и ваши ответы!

Answer 4

Хотя это может быть не тот ответ, который вы ищете, если вы хотите установить значение отображения div в 'none', пока страница загружается (с сервера), а затем иметь событие, связанное с загрузкой страницы ( либо pageLoad в ajax.net, либо присоединить его к событию onload через javascript), что сделает отображение div установленным в «block» ... что гарантирует, что более медленные браузеры не увидят div, «прыгающий вокруг» (может даже поставить 'загрузка' изображения в div, чтобы показать пользователям, что он что-то делает, а не просто невидим)

извините, я не смог предоставить более сложное / свободное решение.

Answer 5

Что если у вас не было переполнения : прокрутка , а вместо этого вы использовали переполнение : скрытое и предусмотрели кнопки прокрутки вверх / вниз, которые позволяли пользователю прокручивать при необходимости? Эти кнопки, конечно, можно легко отключить.