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

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

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

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

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

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

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

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

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


person Sebastian Celis    schedule 20.03.2009    source источник
comment
почему ты хочешь сделать это? Звучит как кошмар юзабилити. Не могли бы вы объяснить, каков контекст использования?   -  person Rahul    schedule 20.03.2009
comment
Я предполагаю, что заставить ЕС прочитать положения и условия или лицензионное соглашение   -  person John Rasch    schedule 20.03.2009
comment
@Rahul Я обновил свой вопрос, добавив более подробную информацию о том, что я пытаюсь сделать. Это неприятная ситуация, и я думаю, что это лучший способ справиться с ней.   -  person Sebastian Celis    schedule 20.03.2009


Ответы (5)


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

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

person Welbog    schedule 20.03.2009

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

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

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

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

person AnthonyWJones    schedule 20.03.2009
comment
Я обновил вопрос, чтобы лучше описать, чего я пытаюсь достичь. В настоящее время я думаю, что пользовательский интерфейс очень удобен и очень хорошо разработан. Но тот факт, что фокус меню заставляет базовый div прокручиваться, ужасен, и мне нужен способ обойти это. - person Sebastian Celis; 20.03.2009
comment
Да, меню представляет собой список тегов привязки, которым необходимо уделить внимание из соображений доступности. Затем меню полностью видно, но действие перемещения мыши у края прокручиваемого элемента div заставляет браузер думать, что он должен прокручивать его для меня. - person Sebastian Celis; 20.03.2009

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

person Eric Wendelin    schedule 20.03.2009
comment
Объекты с переполнением hidden будут по-прежнему прокручиваться в моей ситуации. Попробуйте создать div с переполнением hidden, который имеет небольшой размер, но содержит много текста. Вы можете прокручивать это поле с помощью колесика мыши или щелкать и перетаскивать при выборе текста. - person Sebastian Celis; 20.03.2009
comment
Вам нужно будет предотвратить Default() события onscroll и т. д. Я полагаю :) - person Eric Wendelin; 20.03.2009

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

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

person John West    schedule 20.03.2009

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

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

person Sebastian Celis    schedule 20.03.2009