Как в миранде отключить перескакивание полосы прокрутки. Как убрать полосы прокрутки. Удаление любой прокрутки

В данной статье вы узнаете, как отключить или включить автоматическое скрытие полос прокрутки в универсальных приложениях (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

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


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

Фреймы

Для управления отображением полос прокрутки во фреймах используется параметр scrolling . Он может принимать два основных значения: yes — всегда вызывает появление полос прокрутки, независимо от объема информации и no — запрещает их появление (пример 1).





Фреймы





Как показано в примере, в левом фрейме с именем MENU полосы прокрутки не будет. В соседнем с ним фрейме, хотя параметр scrolling и не указан, полосы прокрутки будут видны, как возможность установленная по умолчанию.

Новые окна

Чтобы удалить скроллбар из новых окон, возможностей ШТМЛ будет недастаткова. Универсальный подход требует использования языка JavaScript для разработки нового окна. А в качестве одного из параметра метода window.open , который и создает окно, можно указать scrollbar=0 . Данный атрибут создает окно без горизонтальных и вертикальных полос прокрутки (пример 2).

Пример 2. Создание нового окна без полос прокрутки





Новое окно

window.open("tips.ШТМЛ", "TIP", "width=400, height=300, status=0, menubar=0, location=0, resizable=0, directories=0, toolbar=0, scrollbar=0 ");




В данном примере открывается файл tips.ШТМЛ в новом окне размером 400x300 пикселов и без различных элементов навигации, в том числе и без полос прокрутки.

Использование стилей

Еще один способ основан на использовании стилевого атрибута overflow . Если этот параметр применить к тегу со значением hidden , скроллбар на web-странице отображаться не будет (пример 3).





Полосы прокрутки

BODY { overflow: hidden; }



Точно также можно убрать скроллбар и у других элементов web-страницы, которые его содержат — некоторые элементы форм, например.

Замечание

Приведенный выше пример не работает в браузере Internet Эксплорер, чтобы скрыть полосы прокрутки в этом браузере, требуется убрать !DOCTYPE . Но при этом код перестанет быть валидным.

Браузер Internet Эксплорер поддерживает также свойство overflow-x и overflow-y , позволяющее прятать полосы прокрутки, соответственно, по горизонтали и вертикали (пример 4).




Полосы прокрутки

BODY { overflow-y: hidden; }



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

Я использую плагин 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 р>

//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": ""}); } }

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

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

  • 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 < head> < meta charset= "UTF-8" > < title> Убираем скролл < body> < div>

div { height: 2800px; }

Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:

html { overflow: hidden; }

и обновим страничку.

Также можно применять свойства overflow-y (overflow-x ) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.

Важно!!!

  • CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
  • Перед использованием данного приема, хорошо подумайте – нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
  • Наиболее оправданным будет применение overflow: hidden в следующих случаях:
    • Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т.д.).
    • Вывод небольших web-форм
    • Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.
    • Послесловие

    Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:

    Кастомизовать системные полосы прокрутки .
    На сегодняшний день более-менее гибкую настройку позволяют выполнять браузеры на базе webkit .

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

    Преимущества:

    • Системный скролл гораздо производительнее JavaScript -симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.

    Недостатки:

    • Нет никаких гарантий, что браузеры на других (не webkit ) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).

    Скрыть системные полосы прокрутки, и использовать JavaScript -эмулятор.
    Казалось бы, вполне логично: хочешь кросс-браузерности – используй JavaScript . Но в данном случае это жестокое заблуждение.

    Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).

    Преимущества

    • Безграничная по глубине кастомизация.

    Недостатки

    • Производительность эмулятора ниже производительности системной прокрутки.
    • Нет гарантий кросс-браузерности и кросс-платформности.