В данной статье вы узнаете, как отключить или включить автоматическое скрытие полос прокрутки в универсальных приложениях (UWP) для вашей учетной записи в Windows 10
В операционной системе , начиная с 1803 разработчики добавили опцию которая позволяет отключить автоматическое скрытие полос прокрутки и будет полезна прежде всего для пользователей которые предпочитают чтобы полосы прокрутки оставались всегда видимыми в приложениях UWP (XAML) и в
По умолчанию операционная система скрывает полосы прокрутки, когда на них не наведен указатель мыши. Отключение этого параметра приводит к тому, что полосы прокрутки в приложениях UWP (XAML) и в меню Пуск будут отображаться как полосы прокрутки в их полном расширенном размере, даже если вы не взаимодействуете с ними.
Как отключить автоматическое скрытие полос прокрутки в приложении «Параметры Windows»
Чтобы отключить автоматическое скрытие полос прокрутки, нажмите на панели задач кнопку Пуск и далее выберите или нажмите + I
В открывшемся окне приложения «Параметры Windows» выберите категорию Специальные возможности
Далее выберите вкладку Дисплей , и в правой части окна, в разделе Упрощение и персонализация Windows , установите переключатель в положение Откл.
Теперь полосы прокрутки будут постоянно отображаться в универсальных приложениях (UWP), а также в меню Пуск, даже если вы не будете взаимодействовать с ними.
Вы можете отменить изменения, для этого установите переключатель Автоматическое скрытие полос прокрутки в Windows в положение Вкл.
Как отключить автоматическое скрытие полос прокрутки в редакторе реестра
Также отключить автоматическое скрытие полос прокрутки можно с помощью редактора реестра. Но прежде чем вносить какие-либо изменения в реестр, рекомендуется или экспортировать тот раздел реестра, непосредственно в котором будут производиться изменения.
Откройте редактор реестра, для этого нажмите сочетание клавиш + R и в открывшемся окне введите regedit и нажмите клавишу Enter↵ или воспользуйтесь поиском в Windows.
В открывшемся окне редактора реестра перейдите по следующему пути:
Далее, нажмите правой кнопкой мыши на разделе 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-страницы и, не отпуская, двигаем вниз. Так происходит выделение содержимого и одновременно его прокрутка. Но этот метод, мягко говоря, не очень удобен, и рекомендовать его можно лишь в очень крайних случаях.
Это видео о том, как убрать полосу прокрутки при с просмотре и публикации сайта в программе Adobe Muse.
Существует 2 способа как это можно сделать:
1. Первый из них – просто убрать элементы находящиеся за пределами области контента в режиме “Дизайна” страницы.
2. Второй – с помощью размещения специального кода html в раздел head страницы.
Смотрите это видео:
“В этом видео уроке мы рассмотрим как убрать полосу прокрутки
Как убрать полосу прокрутки. Описание проблемы.Давайте откроем сразу программу, здесь создан новый проект. Здесь сделаем 75% масштаб, на всякий случай. И увеличим страницу. Допустим, у нас есть на странице несколько объектов – раз, два, три. Здесь у нас какой-то текст, логотипы, картинки всё что угодно. И случайно вы разместили объект вне области контента страницы.
Когда вы нажимаете значок «выделение», этот объект будет у вас не заметен. Особенное, если у вас выключена функция «показывать поля фрейма», а в предыдущих версиях это было по-умолчанию, края фрейма были видны только при наведении мышки на него. Тот объект, который находится за пределами страницы будет вообще не виден, пока вы не наведёте на него мышкой.
Таким образом, при просмотре страницы в браузере, у вас появляется горизонтальная прокрутка, которая всем так мешает на сайте. К тому же, если у вас установлена заливка основного фона страницы, например зелёный цвет, то при просмотре и прокрутке страницы до конца, вы увидите, что ваша страница имеет горизонтальную прокрутку, так будет лучше видно.
Как убрать полосу прокрутки. Решение 1.Мы идём в режим дизайна страницы, даже если у вас выключена функция «края фрейма», можете нажать сочетание клавиш Ctrl+A и таким образом выделите все объекты у себя на странице. Далее уменьшаете масштаб до 50% или зажимаете клавишу Alt, и крутите колесо мышки на себя. Таким образом, вы увидите что у вас есть объекты за областью контента страницы.
Для того, что бы убрать горизонтальную прокрутку, вам нужно удалить эти ненужные объекты, или переместить их в область контента страницы.
Нажимаем сочетание клавиш Ctrl+, и видим, что у нас за областью контента страницы ничего нет.
Идём в режим просмотра, и теперь у нас горизонтальная прокрутка в браузере отсутствует.
Как убрать полосу прокрутки. Решение 2.Если у вас не получилось данным способом убрать горизонтальную прокрутку, то есть ещё один способ, когда вы можете просто отключить эту прокрутку у себя на странице.
Необходимо зайти в меню “Страница”, “ ”, и здесь в разделе «Метаданные», в блоке HTML для head, вставить кое-какой код, который я вам сейчас покажу. Этот код вы можете увидеть в описании этого видео, скопировать его и вставить. Выглядит он вот так.
Выделяем его (я нажимаю сочетание клавиш Ctrl+C), захожу снова в режим дизайна страницы, в свойствах страницы вставляю его вот сюда, и нажимаю ОК.
Таким образом, даже если какой-то блок будет расположен вне области контента страницы, при просмотре страницы в браузере, у вас горизонтальная прокрутка также будет отсутствовать.
Как убрать полосу прокрутки. ЗаключениеНа этом мы заканчиваем наш урок. На нем мы узнали как убрать полосу прокрутки при просмотре страницы в браузере в программе Adobe Muse.
А я не прощаюсь с вами, подписывайтесь на мой канал , ставьте лайки, пишите комментарии и смотрите мои предыдущие и следующие видео уроки. До встречи друзья, пока.”
Как убрать полосу прокрутки. Дополнение к уроку.Для тех у кого не срабатывает данный код и полоса прокрутки все равно остается – пробуйте сначала почистить кеш браузера. Также можете пробовать вот эти коды вместо представленного выше:
Удаление горизонтальной прокрутки, без появления дополнительной вертикальной:
html { overflow-x : hidden } div { height : "100%" ; }
|
Я использую плагин scrollTo jQuery и хотел бы узнать, возможно ли как-то временно отключить прокрутку элемента окна через Javascript? Причина, по которой я хотел бы отключить прокрутку, состоит в том, что когда вы прокручиваете, когда функция scrollTo анимируется, она становится действительно ужасной;)
Конечно, я мог бы сделать $("body").css("overflow", "hidden"); и затем вернуть его в автоматический режим, когда анимация остановится, но было бы лучше, если полоса прокрутки все еще была видна, но неактивна.
27 ответовСобытие scroll не может быть отменено. Но это можно сделать, отменив
следующие события взаимодействия:
Мышь
& Сенсорная прокрутка
и Кнопки
, связанные с прокруткой.
Сделайте это, просто добавив класс к телу:
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