Я использую плагин scrollTo jQuery и хотел бы узнать, возможно ли как-то временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хотел бы отключить прокрутку, состоит в том, что когда вы прокручиваете, когда scrollTo анимирует, это становится действительно уродливым;)
Конечно, я мог бы сделать $("body").css("overflow", "hidden");
и затем вернуть его в автоматический режим, когда анимация остановится, но было бы лучше, если бы полоса прокрутки была все еще видимой, но неактивной.
javascript
jquery
scroll
Оливье Лалонд
источник
источник
Ответы:
scroll
Событие не может быть отменено. Но вы можете сделать это, отменив эти события взаимодействия:мышь и сенсорная прокрутка и кнопки, связанные с прокруткой.
[ Рабочая демонстрация ]
ОБНОВЛЕНИЕ: исправлен рабочий стол Chrome и современные мобильные браузеры с пассивными слушателями
источник
Сделайте это, просто добавив класс к телу:
Добавьте класс, затем удалите, если вы хотите снова включить прокрутку, протестированную в IE, FF, Safari и Chrome.
Для мобильных устройств вам нужно обработать
touchmove
событие:И отвяжите, чтобы снова включить прокрутку. Протестировано в iOS6 и Android 2.3.3
источник
touchmove
событие, как с$('body').bind('touchmove', function(e){e.preventDefault()})
. Отредактировал этот ответ, чтобы включить это мобильное решение.$('body,html')
Вот действительно простой способ сделать это:
Это немного нервно в IE6.
источник
(0, 0)
, просто используйте текущую позицию прокрутки.Следующее решение является базовым, но чистым JavaScript (без jQuery):
источник
scroll-behavior: smooth
Borks это. Кроме того, я не согласен с Ото, который говорит, что это вина браузера. Вы в основном предполагаете, что что-то произойдет мгновенно, когда на самом деле это асинхронноЭто решение будет поддерживать текущую позицию прокрутки, пока прокрутка отключена, в отличие от некоторых, которые возвращают пользователя наверх.
Он основан на ответе галамбалаза , но с поддержкой сенсорных устройств и рефакторинг как единый объект с оболочкой плагина jquery.
Демо здесь.
На github здесь.
источник
mousewheel
Мне жаль отвечать на старый пост, но я искал решение и наткнулся на этот вопрос.
Существует много способов решения этой проблемы, чтобы по-прежнему отображать полосу прокрутки, например, придание контейнеру 100% высоты и
overflow-y: scroll
стиля.В моем случае я только что создал div с полосой прокрутки, которую я отображаю при добавлении
overflow: hidden
в тело:Панель прокрутки элемента должна иметь следующие стили:
Это показывает серую полосу прокрутки, надеюсь, это поможет будущим посетителям.
источник
Я искал решение этой проблемы, но не был удовлетворен каким-либо из вышеперечисленных решений ( на момент написания этого ответа ), поэтому я придумал это решение ..
CSS
JS
источник
overflow-y: scroll
к.scrollDisabled
стилю. В противном случае произошел небольшой скачок, поскольку полоса прокрутки каждый раз пряталась. Конечно, это работает только для меня, потому что моя страница достаточно длинная, чтобы иметь полосу прокрутки даже на самых больших экранах.В соответствии с постом galambalazs я бы добавил поддержку сенсорных устройств, позволяющую нам касаться, но не прокручивать вверх или вниз:
источник
Начиная с Chrome 56 и других современных браузеров, вы должны добавить
passive:false
кaddEventListener
вызову, чтобы сделатьpreventDefault
работу. Поэтому я использую это, чтобы остановить прокрутку на мобильном телефоне:источник
Нет, я бы не стал заниматься обработкой событий, потому что:
не все события гарантированно достигают тела,
выделение текста и перемещение вниз фактически прокручивает документ,
если на этапе события отсоединение что-то пошло не так, вы обречены.
Я укусил это, выполнив действие копирования-вставки со скрытой текстовой областью, и угадайте, что прокручивает страницу всякий раз, когда я делаю копию, потому что внутренне я должен выбрать текстовую область перед вызовом
document.execCommand('copy')
.Во всяком случае, так я иду, обратите внимание
setTimeout()
:Мигает импульс, поскольку полосы прокрутки на мгновение исчезают, но это приемлемо.
источник
В зависимости от того, чего вы хотите добиться с помощью удаленной прокрутки, вы можете просто зафиксировать элемент, из которого вы хотите удалить прокрутку (по щелчку или любой другой триггер, который вы хотите временно отключить прокрутку).
Я искал решение для временного отсутствия прокрутки и для моих нужд, это решило его
сделать класс
затем с Jquery
Я обнаружил, что это достаточно простое решение, которое хорошо работает во всех браузерах, а также подходит для простого использования на портативных устройствах (например, iPhone, планшетах и т. Д.). Поскольку элемент временно исправлен, прокрутки нет :)
НОТА! В зависимости от размещения вашего элемента «contentContainer» вам может потребоваться настроить его слева. Что можно легко сделать, добавив левое значение CSS к этому элементу, когда активен фиксированный класс
источник
Другое решение:
Таким образом, у вас всегда есть вертикальная полоса прокрутки, но, поскольку большая часть моего контента длиннее, чем область просмотра, это нормально для меня. Контент центрируется отдельным div, но без повторного задания поля в теле мой контент остался бы слева.
Вот две функции, которые я использую, чтобы показать мой всплывающий / модальный:
Результат: не прокручиваемый фон и отсутствие перемещения контента из-за левой полосы прокрутки. Протестировано с текущими FF, Chrome и IE 10.
источник
Как насчет этого? (Если вы используете jQuery)
источник
Я использую showModalDialog , для отображения вторичной страницы в качестве модального диалога.
чтобы скрыть полосы прокрутки главного окна:
и при закрытии модального диалога, показывая полосы прокрутки главного окна:
чтобы получить доступ к элементам в главном окне из диалога:
просто для тех, кто ищет showModalDialog : (после строки 29 исходного кода)
источник
Отмена события, как в принятом ответе, на мой взгляд, ужасный метод: /
Вместо этого я использовал
position: fixed; top: -scrollTop();
ниже.Демо: https://jsfiddle.net/w9w9hthy/5/
Из моего всплывающего проекта jQuery: https://github.com/seahorsepip/jPopup
Этот код учитывает проблемы ширины, высоты, полосы прокрутки и скачка страницы.
Возможные проблемы, решенные с помощью приведенного выше кода:
Если у кого-то есть какие-либо улучшения в коде замораживания / размораживания вышеупомянутой страницы, дайте мне знать, чтобы я мог добавить эти улучшения в свой проект.
источник
источник
У меня та же проблема, ниже, как я справлюсь с этим.
надеюсь, это поможет.
источник
Основываясь на ответе Шайенн Форбс, который я нашел здесь через fcalderan: просто отключить прокрутку, а не скрыть ее? и исправить проблему Hallodom исчезнувшей полосы прокрутки
CSS:
JS:
Этот код поднимает вас наверх страницы, но я думаю, что код fcalderan имеет обходной путь.
источник
Я знаю, что это старый вопрос, но я должен был сделать что-то очень похожее, и через некоторое время, пытаясь найти ответ и испробовав разные подходы, я решил использовать очень простое решение.
Моя проблема была очень похожа, почти идентична, с той лишь разницей, что мне не нужно было показывать полосу прокрутки - я просто должен был убедиться, что ее ширина будет по-прежнему использоваться, чтобы ширина страницы не изменялась, пока отображалось мое наложение ,
Когда я начинаю вставлять наложение в экран, я делаю:
и после того, как я сдвигаю свое наложение с экрана, я делаю:
ВАЖНО: это работает отлично, потому что мой оверлей позиционируется
absolute
,right: 0px
когдаvisible
.источник
Самый простой метод:
Чтобы отменить это:
Легко реализовать, но единственным недостатком является:
Это связано с удалением полосы прокрутки и увеличением области просмотра.
источник
body
чтобыhtml
вместо этого.overflow:hidden
что там не работаетВот мое решение, чтобы остановить прокрутку (без jQuery). Я использую его для отключения прокрутки, когда появляется боковое меню.
Я добавил 17px отступа вправо, чтобы компенсировать исчезновение полосы прокрутки. Но это также проблематично, в основном для мобильных браузеров. Решается путем получения ширины стержня в соответствии с этим .
Все вместе в этой ручке.
источник
У меня похожая проблема на сенсорных устройствах. Добавление «touch-action: none» к элементу решило проблему.
За дополнительной информацией. Проверь это:-
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
источник
Это самое простое решение, которое я получил до сих пор. И поверьте мне, я попробовал все остальные, и это самый простой. Он отлично работает на устройствах с Windows , где страница сдвигается вправо, чтобы освободить место для системной полосы прокрутки и устройств IOS, которым не требуется место для их полос прокрутки в браузерах. Таким образом, при использовании этого вам не нужно добавлять отступ справа, чтобы страница не мерцала, когда вы скрываете переполнение тела или HTML с помощью CSS .
Решение довольно простое, если подумать. Идея состоит в том, чтобы дать window.scrollTop () ту же самую точную позицию в момент открытия всплывающего окна. Также измените эту позицию, когда размер окна изменится (так как позиция прокрутки изменяется, когда это происходит).
Итак, поехали ...
Сначала давайте создадим переменную, которая сообщит вам, что всплывающее окно открыто, и назовем его stopWindowScroll . Если мы этого не сделаем, вы получите ошибку неопределенной переменной на своей странице и установите ее в 0 - как неактивная.
Теперь давайте сделаем так, чтобы функция open popup могла быть любой функцией в вашем коде, которая запускает любое всплывающее окно, которое вы используете как плагин или пользовательский. В этом случае это будет простое настраиваемое всплывающее окно с простой функцией щелчка документа.
Итак, следующее, что мы делаем, это создаем функцию закрытия всплывающих окон, которая, повторяю, может быть любой функцией, которую вы уже создали или используете в плагине. Важно то, что нам нужны эти две функции, чтобы установить переменную stopWindowScroll в 1 или 0, чтобы знать, когда она открыта или закрыта.
Затем давайте создадим функцию window.scroll, чтобы мы могли предотвратить прокрутку, как только упомянутый выше stopWindowScroll установлен в 1 - как активный.
Это оно. Для этого не требуется CSS, кроме ваших собственных стилей для страницы. Для меня это сработало, и я надеюсь, что это поможет вам и другим.
Вот рабочий пример на JSFiddle:
Пример JS Fiddle
Дайте мне знать, если это помогло. С уважением.
источник
источник
Этот код будет работать на Chrome 56 и далее (оригинальный ответ больше не работает на Chrome).
Используйте
DomUtils.enableScroll()
для включения прокрутки.Используйте
DomUtils.disableScroll()
для отключения прокрутки.источник
Чтобы предотвратить прыжок, это то, что я использовал
и в моем css
источник
Я нашел этот ответ на другом сайте :
Отключить прокрутку:
После закрытия всплывающего окна прокрутки:
источник
Решение галамбалаза великолепно! Это отлично сработало для меня как в Chrome, так и в Firefox. И это также может быть расширено, чтобы предотвратить любое событие по умолчанию из окна браузера. Допустим, вы делаете приложение на холсте. Вы могли бы сделать это:
А затем в вашем приложении, скажем, вы собираетесь обрабатывать свои собственные события, такие как мышь, клавиатура, сенсорные события и т. Д. Вы можете отключить события по умолчанию, когда мышь входит в холст, и повторно включить их, когда мышь выходит:
Вы можете даже отключить контекстное меню с помощью этого хака:
источник
У меня была похожая проблема с анимацией на мобильных экранах, но не на ноутбуках, когда я пытался анимировать div с помощью команды jquery animate. Поэтому я решил использовать таймер, который восстанавливал положение прокрутки окна так часто, что на первый взгляд документ казался статичным. Это решение отлично работало на мобильных устройствах с небольшим экраном, таких как Samsung Galaxy-2 или iphone-5.
Основная логика этого подхода : Таймер для установки положения прокрутки окна в исходное положение прокрутки должен быть запущен перед командой jquery animate, а затем, когда анимация завершена, нам нужно очистить этот таймер (
original scroll position
это позиция непосредственно перед запуском анимации).К своему приятному удивлению , я обнаружил, что документ действительно выглядел статичным в течение продолжительности анимации, если был интервал таймера
1 millisecond
, к чему я стремился.ДРУГОЕ РЕШЕНИЕ, которое сработало : Основываясь на ответе Мохаммада Анини на этот пост, чтобы включить / отключить прокрутку, я также обнаружил, что работает модифицированная версия кода, как показано ниже.
источник
Простое решение, которое сработало для меня (временно отключив прокрутку окна).
На основании этой скрипки: http://jsfiddle.net/dh834zgw/1/
следующий фрагмент (с использованием jquery) отключит прокрутку окна:
И в вашем css:
Теперь, когда вы удаляете модальный режим, не забудьте удалить класс noscroll в теге html:
источник