Запретить скролл(scroll) на css и jquery
Как же все таки убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы). Решение можно реализовать на jQuery так:
Запретить скролл:
$(«html,body»).css(«overflow»,»hidden»);
или только вертикальный скролл:
$(«body»).css(«overflow-y»,»hidden»);
и на css:
position:fixed;overflow:hidden
Запретить scroll на чистом JS можно так:
document.body.style.overflow = ‘hidden’;
Убрать скроллинг на IPAD можно так:
document.body.addEventListener(‘touchmove’,function(event)
на jQuery:
$(document).bind(‘touchmove’, false);
P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример:
создаем сам класс
.fixed <
position:fixed; /*позицианируем чтобы исчез скролл*/
width:100%; /*что бы верстка не складывалась по ширине*/
>
Применяем через яваскри когда нам это необходимо
$(«body»).addClass(«fixed»);
и убираем его когда нужно сновa включить прокрутку
$(«body»).removeClass(«fixed»);
Поделись с друзьями:
Комментарии к записи Запретить скролл(scroll) на css и jquery отключены
Нет комментариев для записи Запретить скролл(scroll) на css и jquery
Источник
EvgeniyaPronina / no scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| //Запретить скролл: |
| $(«html,body»).css(«overflow»,»hidden»); |
| //или только вертикальный скролл: |
| $(«body»).css(«overflow-y»,»hidden»); |
| //и на css: |
| position:fixed;overflow:hidden |
| //Запретить scroll на чистом JS можно так: |
| document.body.style.overflow = ‘hidden’; |
| //Убрать скроллинг на IPAD можно так: |
| document.body.addEventListener(‘touchmove’,function(event) |
| //на jQuery: |
| $(document).bind(‘touchmove’, false); |
| //P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример: |
| создаем сам класс |
| .fixed < |
| position:fixed; /*позицианируем чтобы исчез скролл*/ |
| width:100%; /*что бы верстка не складывалась по ширине*/ |
| > |
| //Применяем когда нам это необходимо |
| $(«body»).addClass(«fixed»); |
| //и убираем его когда нужно сновa включить прокрутку |
| $(«body»).removeClass(«fixed»); |
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Источник
Как программно отключить прокрутку страницы с помощью jQuery
используя jQuery, я хотел бы отключить прокрутку тела:
- Set body
- захват текущего scrollTop();/scrollLeft()
- привязка к событию прокрутки тела, установите scrollTop / scrollLeft в захваченное значение.
есть ли лучший способ?
пожалуйста, см. мой пример, и причина, по http://jsbin.com/ikuma4/2/edit
Я знаю, кто-то будет думать «почему он просто не использовать position: fixed на панели?».
пожалуйста, не предлагайте это, поскольку у меня есть другие причины.
22 ответов
единственный способ, которым я нашел это, похож на то, что вы описали:
- захватить текущее положение прокрутки (не забудьте горизонтальную ось!).
- установите overflow в hidden (вероятно, хотите сохранить Предыдущее значение переполнения).
- прокрутите документ до сохраненной позиции прокрутки с помощью scrollTo ().
затем, когда вы будете готовы разрешить прокрутку снова, отмените все это.
Edit: нет причин, по которым я не могу дать вам код, так как я пошел трудность выкопать его.
Это полностью отключить прокрутку:
проверено на Firefox и Chrome.
вы можете использовать этот код:
Я просто немного настраиваю решение на tfe. В частности, я добавил дополнительный контроль, чтобы убедиться, что есть нет смещения содержимого страницы (он же страница сдвига) когда полоса прокрутки установлено значение hidden .
две функции Javascript lockScroll() и unlockScroll() можно определить, соответственно, для блокировки и разблокировки прокрутки страницы.
где я предположил, что нет первоначального маржа.
обратите внимание, что, хотя вышеуказанное решение работает в большинстве практических случаев, оно не является окончательным, поскольку оно нуждается в дополнительной настройке для страниц, которые включают, например, заголовок с position:fixed . Давайте рассмотрим этот особый случай на примере. Пусть
затем следует добавить следующее в функции lockScroll() и unlockScroll() :
наконец, позаботьтесь о некоторых возможных начальное значение для полей или отступов.
чтобы отключить прокрутку, попробуйте следующее:
Я написал плагин jQuery для обработки этого:$.disablescroll.
это предотвращает прокрутку от событий mousewheel, touchmove и нажатия клавиш, таких как Страницы .
здесь демо здесь.
вы можете прикрепить функцию к событиям прокрутки и предотвратить ее поведение по умолчанию.
один лайнер для отключения прокрутки, включая среднюю кнопку мыши.
редактировать: в любом случае нет необходимости в jQuery, ниже того же, что и выше в vanilla JS(это означает отсутствие фреймворков, просто JavaScript):
этого.функцию documentelement.scrollTop — стандарт
не можете ли вы просто установить высоту тела на 100% и скрыть переполнение? См.http://jsbin.com/ikuma4/13/edit
Это может или не может работать для ваших целей, но вы можете продлить jScrollPane для запуска других функций, прежде чем он сделает прокрутку. Я только что проверил это немного, но я могу подтвердить, что вы можете прыгнуть и полностью предотвратить прокрутку. Все, что я сделал, было:—5—>
- скачать демо zip:http://github.com/vitch/jScrollPane/archives/master
- откройте демонстрацию» события » (events.html)
- изменить его, чтобы использовать источник сценария без минификации:
- внутри jquery.jscrollpane не.js, вставьте «return;» в строке 666 (благоприятный номер строки! но если ваша версия немного отличается, это первая строка positionDragY(destY, animate) функции
запуск событий.html, и вы увидите окно прокрутки, которое из-за вашего вмешательства в кодирование не будет прокручиваться.
таким образом вы можете управлять полосами прокрутки всего браузера (см. fullpage_scroll.формат HTML.)
Так, предположительно, следующий шаг-добавить вызов к какой-то другой функции, которая отключается и выполняет вашу магию привязки, а затем решает, продолжать ли прокрутку или нет. У вас также есть вызовы API для установки scrollTop и scrollLeft.
Если вы хотите больше помощи, сообщение, где вы получите до!
надеюсь, это помогло.
Я поставил ответ, который может помочь здесь: в jQuery simplemodal отключить прокрутку
Он показывает, как отключить полосы прокрутки без смещения текст вокруг. Вы можете игнорировать части о simplemodal.
кто-то опубликовал этот код, который имеет проблему не сохранения положения прокрутки при восстановлении. Причина в том, что люди склонны применять его к html и телу или только к телу, но он должен применяться только к html. Таким образом, при восстановлении положение прокрутки будет сохранено:
Источник
Как временно отключить прокрутку?
Я использую плагин scrollTo jQuery и хотел бы узнать, возможно ли как-то временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хотел бы отключить прокрутку, состоит в том, что когда вы прокручиваете, когда функция scrollTo анимируется, она становится действительно ужасной;)
Конечно, я мог бы сделать $(«body»).css(«overflow», «hidden»); и затем вернуть его в автоматический режим, когда анимация остановится, но было бы лучше, если полоса прокрутки все еще была видна, но неактивна.
27 ответов
Событие scroll не может быть отменено. Но это можно сделать, отменив следующие события взаимодействия:
Мышь & Сенсорная прокрутка и Кнопки , связанные с прокруткой.
[ Рабочая демонстрация ]
Сделайте это, просто добавив класс к телу:
Добавьте класс и удалите его, если хотите снова включить прокрутку, протестированную в IE, FF, Safari и Chrome.
Для мобильных устройств вам нужно обработать событие touchmove :
И открепите, чтобы снова включить прокрутку. Протестировано в iOS6 и Android 2.3.3
Вот действительно простой способ сделать это:
Это немного нервно в IE6.
Следующее решение является базовым, но чистым JavaScript (без jQuery):
Мне жаль отвечать на старый пост, но я искал решение и наткнулся на этот вопрос.
Существует много способов решения этой проблемы, чтобы по-прежнему отображать полосу прокрутки, например, присвоить контейнеру высоту 100% и стиль overflow-y: scroll .
В моем случае я только что создал div с полосой прокрутки, которую я отображаю, добавляя overflow: hidden в тело:
Панель прокрутки элемента должна иметь следующие стили:
Здесь показана серая полоса прокрутки, надеюсь, она поможет будущим посетителям.
Согласно сообщению galambalazs , я бы добавил поддержку сенсорных устройств, что позволяет нам касаться, но не прокручивать вверх или вниз:
Я искал решение этой проблемы, но не был удовлетворен каким-либо из вышеперечисленных решений ( на момент написания этого ответа ), поэтому я нашел это решение.
CSS
JS
Таким образом, у вас всегда есть вертикальная полоса прокрутки, но, поскольку большая часть моего контента длиннее, чем область просмотра, для меня это нормально. Контент центрируется с помощью отдельного элемента div, но без повторного задания поля в теле мой контент останется слева.
Это две функции, которые я использую для показа моего всплывающего окна /модального режима:
Результат: фон без прокрутки и повторное позиционирование содержимого из-за левой полосы прокрутки. Протестировано с текущими FF, Chrome и IE 10.
Как насчет этого? (Если вы используете jQuery)
В зависимости от того, чего вы хотите достичь с помощью удаленной прокрутки, вы можете просто исправить элемент, с которого вы хотите удалить прокрутку (по щелчку или любой другой триггер, который вы хотите временно отключить прокрутку)
Я искал решение «temp no scroll», и для моих нужд это решило его
Я обнаружил, что это достаточно простое решение, которое хорошо работает во всех браузерах, а также подходит для простого использования на портативных устройствах (например, iPhone, планшетах и т. д.). Поскольку элемент временно исправлен, прокрутки нет:)
ВНИМАНИЕ! В зависимости от размещения вашего элемента «contentContainer» вам может потребоваться настроить его слева. Что можно легко сделать, добавив левое значение CSS к этому элементу, когда активен фиксированный класс
Я использую showModalDialog для отображения дополнительной страницы в качестве модального диалога. .
чтобы скрыть полосы прокрутки главного окна:
и при закрытии модального диалога, показывая полосы прокрутки главного окна:
для доступа к элементам в главном окне из диалогового окна:
только для тех, кто ищет showModalDialog 🙁 после строки 29 оригинала код)
Отмена события, как в принятом ответе, на мой взгляд, ужасный метод: /
Вместо этого я использовал position: fixed; top: -scrollTop(); ниже.
Из моего всплывающего проекта jQuery https://github.com/seahorsepip/jPopup р>
Этот код учитывает проблемы ширины, высоты, полосы прокрутки и скачка страницы.
Возможные проблемы, устраненные с помощью приведенного выше кода:
- width, при фиксированной позиции установки ширина html-элемента может быть меньше 100%
- высота такая же, как выше
- полоса прокрутки, когда при фиксированной позиции положение содержимого страницы больше не имеет полосы прокрутки, даже если она имела полосу прокрутки, прежде чем возник горизонтальный скачок страницы
- pagejump, когда установка позиции фиксирована, scrollTop больше не действует, что приводит к вертикальному скачку страницы
Если у кого-то есть какие-либо улучшения в коде замораживания /размораживания вышеупомянутой страницы, дайте мне знать, чтобы я мог добавить эти улучшения в свой проект.
Начиная с Chrome 56 и других современных браузеров, вы должны добавить passive:false в addEventListener вызов, чтобы заставить preventDefault работать. Поэтому я использую это, чтобы остановить прокрутку на мобильном телефоне:
Опираясь на ответ Шайенна Форбса, который я нашел здесь через fcalderan: Просто отключите свиток не скрыть? и исправить проблему исчезновения полосы прокрутки в Hallodom
Этот код поднимает вас наверх страницы, но я думаю, что у кода fcalderan есть обходной путь.
У меня та же проблема, ниже описан способ ее решения.
надеюсь, что это поможет.
Самый простой способ:
Чтобы отменить это:
Легко реализовать, но единственным недостатком является:
- Страница немного переместится влево, если выровнена по центру (по горизонтали).
Это связано с тем, что полоса прокрутки была удалена, а область просмотра стала немного шире.
Вот мое решение остановить прокрутку (без jQuery). Я использую его для отключения прокрутки, когда появляется боковое меню.
Я добавил 17px отступа вправо, чтобы компенсировать исчезновение полосы прокрутки. Но это также проблематично, в основном для мобильных браузеров. Решается путем получения ширины полосы в соответствии с этим .
Я нашел этот ответ на другом сайте :
После закрытия прокрутки всплывающего окна:
Галамбалаз — отличное решение! Это отлично сработало для меня как в Chrome, так и в Firefox. И это также может быть расширено, чтобы предотвратить любое событие по умолчанию из окна браузера. Допустим, вы делаете приложение на холсте. Вы можете сделать это:
А затем в вашем приложении предположим, что вы собираетесь обрабатывать свои собственные события, такие как мышь, клавиатура, сенсорные события и т. д. Вы можете отключить события по умолчанию, когда мышь входит внутрь холста, и снова включить их. когда мышь гаснет:
Вы можете даже отключить контекстное меню с помощью этого хака:
У меня была похожая проблема с анимацией на мобильных экранах, но не на ноутбуках, когда я пытался анимировать div с помощью команды jquery animate. Поэтому я решил использовать таймер, который восстанавливал положение прокрутки окна так часто, что на первый взгляд документ казался статичным. Это решение отлично работало на мобильных устройствах с небольшим экраном, таких как Samsung Galaxy-2 или iphone-5.
Основная логика этого подхода : таймер для установки положения позиции прокрутки окна в исходное положение прокрутки должен быть запущен перед командой jquery animate, а затем, когда анимация завершится, нам нужно очистить этот таймер ( —- +: = 0 =: + —- — позиция перед началом анимации).
К моему приятному удивлению я обнаружил, что документ на самом деле выглядит статичным во время анимации, если интервал таймера был original scroll position , к чему я стремился.
ДРУГОЕ РЕШЕНИЕ, которое сработало . Основываясь на ответе Мохаммада Анини на этот пост о включении /отключении прокрутки, я также обнаружил, что работает модифицированная версия кода, как показано ниже.
Простое решение, которое сработало для меня (временно отключив прокрутку окна).
следующий фрагмент (с использованием jquery) отключит прокрутку окна:
Теперь, когда вы удаляете модал, не забудьте удалить класс noscroll в теге html:
Источник
