Как отключить полосы прокрутки. Как убрать полосы прокрутки

Главная / Мобильные устройства

Я использую плагин scrollTo jQuery и хотел бы знать, можно ли как-то временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хотел бы отключить прокрутку, заключается в том, что при прокрутке во время анимации scrollTo она становится действительно уродливой;)

конечно, я мог бы сделать $("body").css("overflow", "hidden"); а затем верните его в авто, когда анимация остановится, но было бы лучше, если бы полоса прокрутки была все еще видна, но неактивна.

30 ответов /** * $.disablescroll * Author: Josh Harrison - aloof.co * * Disables scroll events from mousewheels, touchmoves and keypresses. * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride! */ ;(function($) { "use strict"; var instance, proto; function UserScrollDisabler($container, options) { // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 // left: 37, up: 38, right: 39, down: 40 this.opts = $.extend({ handleKeys: true, scrollEventKeys: }, options); this.$container = $container; this.$document = $(document); this.lockToScrollPos = ; this.disable(); } proto = UserScrollDisabler.prototype; proto.disable = function() { var t = this; t.lockToScrollPos = [ t.$container.scrollLeft(), t.$container.scrollTop() ]; t.$container.on("mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll", t._handleWheel); t.$container.on("scroll.disablescroll", function() { t._handleScrollbar.call(t); }); if(t.opts.handleKeys) { t.$document.on("keydown.disablescroll", function(event) { t._handleKeydown.call(t, event); }); } }; proto.undo = function() { var t = this; t.$container.off(".disablescroll"); if(t.opts.handleKeys) { t.$document.off(".disablescroll"); } }; proto._handleWheel = function(event) { event.preventDefault(); }; proto._handleScrollbar = function() { this.$container.scrollLeft(this.lockToScrollPos); this.$container.scrollTop(this.lockToScrollPos); }; proto._handleKeydown = function(event) { for (var i = 0; i < this.opts.scrollEventKeys.length; i++) { if (event.keyCode === this.opts.scrollEventKeys[i]) { event.preventDefault(); return; } } }; // Plugin wrapper for object $.fn.disablescroll = function(method) { // If calling for the first time, instantiate the object and save // reference. The plugin can therefore only be instantiated once per // page. You can pass options object in through the method parameter. if(! instance && (typeof method === "object" || ! method)) { instance = new UserScrollDisabler(this, method); } // Instance already created, and a method is being explicitly called, // e.g. .disablescroll("undo"); else if(instance && instance) { instance.call(instance); } }; // Global access window.UserScrollDisabler = UserScrollDisabler; })(jQuery);

из моего всплывающего проекта jQuery:https://github.com/seahorsepip/jPopup

//Freeze page content scrolling function freeze() { if($("html").css("position") != "fixed") { var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop(); if(window.innerWidth > $("html").width()) { $("html").css("overflow-y", "scroll"); } $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top}); } } //Unfreeze page content scrolling function unfreeze() { if($("html").css("position") == "fixed") { $("html").css("position", "static"); $("html, body").scrollTop(-parseInt($("html").css("top"))); $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""}); } }

этот код принимает во внимание проблемы ширины, высоты, полосы прокрутки и pagejump.

возможные проблемы, решенные выше код:

ширина, при установке фиксированной позиции ширина html-элемента может быть меньше 100%
высота, такая же, как выше
scrollbar, при установке позиции фиксированной содержимое страницы больше не имеет полосы прокрутки, даже если у него была полоса прокрутки, прежде чем привести к горизонтальному pagejump
pagejump, при установке фиксированной позиции страница scrollTop больше не эффективна, что приводит к вертикальному pagejump

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

отключить прокрутки:

$(".popup").live({ popupbeforeposition: function(event, ui) { $("body").on("touchmove", false); } });

после закрытия всплывающего окна прокрутки версии:

$(".popup").live({ popupafterclose: function(event, ui) { $("body").unbind("touchmove"); } });

следующий фрагмент (с помощью jquery) отключит прокрутку окна:

Var curScrollTop = $(window).scrollTop(); $("html").toggleClass("noscroll").css("top", "-" + curScrollTop + "px");

и в вашем css:

Html.noscroll{ position: fixed; width: 100%; top:0; left: 0; height: 100%; overflow-y: scroll !important; z-index: 10; }

Теперь, когда вы удаляете модальный, не забудьте удалить класс noscroll в теге html:

$("html").toggleClass("noscroll");

Document.onwheel = function(e) { // get the target element target = e.target; // the target element might be the children of the scrollable element // e.g., "li"s inside an "ul", "p"s inside a "div" etc. // we need to get the parent element and check if it is scrollable // if the parent isn"t scrollable, we move up to the next parent while (target.scrollHeight 0) { e.preventDefault(); } } }; body { background: gainsboro; } #box { width: 300px; height: 600px; padding: 5px; border: 1px solid silver; margin: 50px auto; background: white; overflow: auto; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Это самое простое решение, которое я получил до сих пор. И поверьте мне, я пробовал все остальные,и это самый простой. Он отлично работает на устройствах Windows , который толкает страницу справа, чтобы иметь место для полосы прокрутки системы и устройства IOS которые не требуют места для своих полос прокрутки в браузерах. Таким образом, используя это, вам не нужно добавлять заполнение справа, чтобы страница не мерцала, когда вы скрыть переполнение тела или html с помощью в CSS .

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

Я нашел лучший, но глючный способ, объединив идею sdleihssirhc:

Window.onscroll = function() { window.scrollTo(window.scrollX, window.scrollY); //Or //window.scroll(window.scrollX, window.scrollY); //Or Fallback //window.scrollX=window.scrollX; //window.scrollY=window.scrollY; };

Я не тестировал его, но я отредактирую позже и дам вам знать. Я на 85% уверен, что он работает в основных браузерах.

В данной статье вы узнаете, как отключить или включить автоматическое скрытие полос прокрутки в универсальных приложениях (UWP) для вашей учетной записи в Windows 10

В операционной системе , начиная с 1803 разработчики добавили опцию которая позволяет отключить автоматическое скрытие полос прокрутки и будет полезна прежде всего для пользователей которые предпочитают чтобы полосы прокрутки оставались всегда видимыми в приложениях UWP (XAML) и в

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

Как отключить автоматическое скрытие полос прокрутки в приложении «Параметры Windows»

Чтобы отключить автоматическое скрытие полос прокрутки, нажмите на панели задач кнопку Пуск и далее выберите или нажмите + I

В открывшемся окне приложения «Параметры Windows» выберите категорию Специальные возможности

Далее выберите вкладку Дисплей , и в правой части окна, в разделе Упрощение и персонализация Windows , установите переключатель в положение Откл.

Теперь полосы прокрутки будут постоянно отображаться в универсальных приложениях (UWP), а также в меню Пуск, даже если вы не будете взаимодействовать с ними.

Вы можете отменить изменения, для этого установите переключатель Автоматическое скрытие полос прокрутки в Windows в положение Вкл.

Как отключить автоматическое скрытие полос прокрутки в редакторе реестра

Также отключить автоматическое скрытие полос прокрутки можно с помощью редактора реестра. Но прежде чем вносить какие-либо изменения в реестр, рекомендуется или экспортировать тот раздел реестра, непосредственно в котором будут производиться изменения.

Откройте редактор реестра, для этого нажмите сочетание клавиш + R и в открывшемся окне введите regedit и нажмите клавишу Enter↵ или воспользуйтесь поиском в Windows.

В открывшемся окне редактора реестра перейдите по следующему пути:

HKEY_CURRENT_USER\Control Panel\Accessibility

Далее, нажмите правой кнопкой мыши на разделе Accessibility или нажмите правой кнопкой мыши на пустой области в правой части окна и в контекстном меню выберите Создать > Параметр DWORD (32 бита) . Присвойте созданному параметру имя DynamicScrollbars

Затем дважды щелкните мышью по созданному параметру DynamicScrollbars и в качестве его значения установите 0 и нажмите кнопку OK

Изменения вступают в силу сразу.

Чтобы включить автоматическое скрытие полос прокрутки, в параметре DynamicScrollbars установите значение 1
Также, чтобы отключить автоматическое скрытие полос прокрутки, вы можете следующего содержания:

"DynamicScrollbars"=dword:00000000

Чтобы отменить произведенные действия, и тем самым включить автоматическое скрытие полос прокрутки, создайте и примените файл реестра следующего содержания:

Windows Registry Editor Version 5.00

"DynamicScrollbars"=dword:00000001

После применения файлов реестра, чтобы изменения вступили в силу, выполните выход из системы и повторный вход.

Как выключить прокрутку?

Ответ мастера:

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

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

Для отключения плавной прокрутки во время просмотра интернет-ресурсов, запустим браузер и выберем в меню «Инструменты» раздел «Настройки». Для Internet Explorer это будет меню «Сервис» и раздел «Свойства обозревателя». В случае, если меню не отображается, кликнем по верхней или нижней панели окна браузера и отметим маркером в меню подпункт «Панель меню», либо «Строку меню».

После открытия окна «Настройки» перейдем к вкладке «Дополнительные» и сделаем активным подраздел «Общие». Найдем группу «Просмотр сайтов» и снимем отметку с поля «Использовать плавную прокрутку», после чего нажмем кнопку «ОК».

Для того чтобы отключить автоматическую прокрутку, снимем отметку с поля «Использовать автоматическую прокрутку». Для Internet Explorer способ будет несколько отличаться - нужно передвигаться по списку доступных настроек, пользуясь при этом полосой прокрутки, пока не будут найдены необходимые пункты.

Для того чтобы настроить общие параметры прокрутки, обратимся к компоненту «Мышь», для чего вызовем «Панель управления» (из меню «Пуск»). Зайдем в категорию «Принтеры и другое оборудование» и кликнем по значку «Мышь».

Откроется окно «Свойства: Мышь», после этого нужно перейти к вкладке «Колесико» и настроить прокрутку согласно своим требованиям. Маркер, который установлен в поле «Экран», будет двигать изображение по монитору на расстояние, равное высоте экрана.

Если для нас данный параметр чересчур велик, можно установить маркер в поле «На указанное количество строк» и ввести необходимое значение при помощи клавиатуры или кнопок со стрелками. Значение «0» поставить нельзя. Применим осуществленные изменения и закроем окно.

Я использую плагин scrollTo jQuery и хотел бы узнать, возможно ли как-то временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хотел бы отключить прокрутку, состоит в том, что когда вы прокручиваете, когда функция scrollTo анимируется, она становится действительно ужасной;)

Конечно, я мог бы сделать $("body").css("overflow", "hidden"); и затем вернуть его в автоматический режим, когда анимация остановится, но было бы лучше, если полоса прокрутки все еще была видна, но неактивна.

27 ответов

Событие scroll не может быть отменено. Но это можно сделать, отменив следующие события взаимодействия:
Мышь & Сенсорная прокрутка и Кнопки , связанные с прокруткой.

[ Рабочая демонстрация ] // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = {37: 1, 38: 1, 39: 1, 40: 1}; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function preventDefaultForScrollKeys(e) { if (keys) { preventDefault(e); return false; } } function disableScroll() { if (window.addEventListener) // older FF window.addEventListener("DOMMouseScroll", preventDefault, false); window.onwheel = preventDefault; // modern standard window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE window.ontouchmove = preventDefault; // mobile document.onkeydown = preventDefaultForScrollKeys; } function enableScroll() { if (window.removeEventListener) window.removeEventListener("DOMMouseScroll", preventDefault, false); window.onmousewheel = document.onmousewheel = null; window.onwheel = null; window.ontouchmove = null; document.onkeydown = null; }

Сделайте это, просто добавив класс к телу:

Stop-scrolling { height: 100%; overflow: hidden; }

Добавьте класс и удалите его, если хотите снова включить прокрутку, протестированную в IE, FF, Safari и Chrome.

$("body").addClass("stop-scrolling")

Для мобильных устройств вам нужно обработать событие touchmove:

$("body").bind("touchmove", function(e){e.preventDefault()})

И открепите, чтобы снова включить прокрутку. Протестировано в iOS6 и Android 2.3.3

$("body").unbind("touchmove")

Следующее решение является базовым, но чистым JavaScript (без jQuery):

Function disableScrolling(){ var x=window.scrollX; var y=window.scrollY; window.onscroll=function(){window.scrollTo(x, y);}; } function enableScrolling(){ window.onscroll=function(){}; }

Мне жаль отвечать на старый пост, но я искал решение и наткнулся на этот вопрос.

Существует много способов решения этой проблемы, чтобы по-прежнему отображать полосу прокрутки, например, присвоить контейнеру высоту 100% и стиль overflow-y: scroll .

В моем случае я только что создал div с полосой прокрутки, которую я отображаю, добавляя overflow: hidden в тело:

Function disableScroll() { document.getElementById("scrollbar").style.display = "block"; document.body.style.overflow = "hidden"; }

Панель прокрутки элемента должна иметь следующие стили:

Overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

Здесь показана серая полоса прокрутки, надеюсь, она поможет будущим посетителям.

Согласно сообщению galambalazs , я бы добавил поддержку сенсорных устройств, что позволяет нам касаться, но не прокручивать вверх или вниз:

Function disable_scroll() { ... document.ontouchmove = function(e){ e.preventDefault(); } } function enable_scroll() { ... document.ontouchmove = function(e){ return true; } }

Я искал решение этой проблемы, но не был удовлетворен каким-либо из вышеперечисленных решений (на момент написания этого ответа), поэтому я нашел это решение.

ScrollDisabled { position: fixed; margin-top: 0;// override by JS to use acc to curr $(window).scrollTop() width: 100%; }

Var y_offsetWhenScrollDisabled=0; function disableScrollOnBody(){ y_offsetWhenScrollDisabled= $(window).scrollTop(); $("body").addClass("scrollDisabled").css("margin-top", -y_offsetWhenScrollDisabled); } function enableScrollOnBody(){ $("body").removeClass("scrollDisabled").css("margin-top", 0); $(window).scrollTop(y_offsetWhenScrollDisabled); }

Другое решение:

Таким образом, у вас всегда есть вертикальная полоса прокрутки, но, поскольку большая часть моего контента длиннее, чем область просмотра, для меня это нормально. Контент центрируется с помощью отдельного элемента div, но без повторного задания поля в теле мой контент останется слева.

Это две функции, которые я использую для показа моего всплывающего окна /модального режима:

Var popup_bodyTop = 0; var popup_bodyLeft = 0; function popupShow(id) { $("#"+ id).effect("fade"); $("#popup-overlay").effect("fade"); // remember current scroll-position // because when setting/unsetting position: fixed to body // the body would scroll to 0,0 popup_bodyLeft = $(document).scrollLeft(); popup_bodyTop = $(document).scrollTop(); // invert position var x = - popup_bodyLeft; var y = - popup_bodyTop; $("body").css("position", "fixed"); $("body").css("top", y.toString() +"px"); $("body").css("left", x.toString() +"px"); } function popupHide(id) { $("#"+ id).effect("fade"); $("#popup-overlay").effect("fade"); $("body").css("position", ""); $("html, body").scrollTop(popup_bodyTop); $("html, body").scrollLeft(popup_bodyLeft); }

Результат: фон без прокрутки и повторное позиционирование содержимого из-за левой полосы прокрутки. Протестировано с текущими FF, Chrome и IE 10.

Как насчет этого? (Если вы используете jQuery)

Var $window = $(window); var $body = $(window.document.body); window.onscroll = function() { var overlay = $body.children(".ui-widget-overlay").first(); // Check if the overlay is visible and restore the previous scroll state if (overlay.is(":visible")) { var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 }; window.scrollTo(scrollPos.x, scrollPos.y); } else { // Just store the scroll state $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() }); } };

В зависимости от того, чего вы хотите достичь с помощью удаленной прокрутки, вы можете просто исправить элемент, с которого вы хотите удалить прокрутку (по щелчку или любой другой триггер, который вы хотите временно отключить прокрутку)

Я искал решение "temp no scroll", и для моих нужд это решило его

сделать класс

Fixed{ position: fixed; }

затем с Jquery

Var someTrigger = $("#trigger"); //a trigger button var contentContainer = $("#content"); //element I want to temporarily remove scroll from contentContainer.addClass("notfixed"); //make sure that the element has the "notfixed" class //Something to trigger the fixed positioning. In this case we chose a button. someTrigger.on("click", function(){ if(contentContainer.hasClass("notfixed")){ contentContainer.removeClass("notfixed").addClass("fixed"); }else if(contentContainer.hasClass("fixed")){ contentContainer.removeClass("fixed").addClass("notfixed"); }; });

Я обнаружил, что это достаточно простое решение, которое хорошо работает во всех браузерах, а также подходит для простого использования на портативных устройствах (например, iPhone, планшетах и т. д.). Поскольку элемент временно исправлен, прокрутки нет:)

ВНИМАНИЕ! В зависимости от размещения вашего элемента «contentContainer» вам может потребоваться настроить его слева. Что можно легко сделать, добавив левое значение CSS к этому элементу, когда активен фиксированный класс

ContentContainer.css({ "left": $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it"s only pushed from one side) });

Из моего всплывающего проекта jQuery https://github.com/seahorsepip/jPopup р>

Этот код учитывает проблемы ширины, высоты, полосы прокрутки и скачка страницы.

Возможные проблемы, устраненные с помощью приведенного выше кода:

width, при фиксированной позиции установки ширина html-элемента может быть меньше 100%
высота такая же, как выше
полоса прокрутки, когда при фиксированной позиции положение содержимого страницы больше не имеет полосы прокрутки, даже если она имела полосу прокрутки, прежде чем возник горизонтальный скачок страницы
pagejump, когда установка позиции фиксирована, scrollTop больше не действует, что приводит к вертикальному скачку страницы

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

Начиная с Chrome 56 и других современных браузеров, вы должны добавить passive:false в addEventListener вызов, чтобы заставить preventDefault работать. Поэтому я использую это, чтобы остановить прокрутку на мобильном телефоне:

Function preventDefault(e){ e.preventDefault(); } function disableScroll(){ document.body.addEventListener("touchmove", preventDefault, { passive: false }); } function enableScroll(){ document.body.removeEventListener("touchmove", preventDefault, { passive: false }); }

Опираясь на ответ Шайенна Форбса, который я нашел здесь через fcalderan: Просто отключите свиток не скрыть? и исправить проблему исчезновения полосы прокрутки в Hallodom

Preventscroll{ position: fixed; overflow-y:scroll; }

Whatever.onclick = function(){ $("body").addClass("preventscroll"); } whatevertoclose.onclick = function(){ $("body").removeClass("preventscroll"); }

Этот код поднимает вас наверх страницы, но я думаю, что у кода fcalderan есть обходной путь.

У меня та же проблема, ниже описан способ ее решения.

/* file.js */ var body = document.getElementsByTagName("body"); //if window dont scroll body.classList.add("no-scroll"); //if window scroll body.classList.remove("no-scroll"); /* file.css */ .no-scroll{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; }

надеюсь, что это поможет.

Самый простой способ:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

Чтобы отменить это:

$("body").css("overflow", "auto");

Легко реализовать, но единственным недостатком является:

Страница немного переместится влево, если выровнена по центру (по горизонтали).

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

Вот мое решение остановить прокрутку (без jQuery). Я использую его для отключения прокрутки, когда появляется боковое меню.

Disable/Enable scroll var noscroll_var; function noscroll(){ if(noscroll_var){ document.getElementsByTagName("html").style.overflowY = ""; document.body.style.paddingRight = "0"; noscroll_var = false }else{ document.getElementsByTagName("html").setAttribute("style", "overflow-y: hidden !important"); document.body.style.paddingRight = "17px"; noscroll_var = true } }/*noscroll()*/ for(var i=0; i

Выбор редакции