Как убрать полосы прокрутки? Как убрать полосы прокрутки Как убрать полосу прокрутки. Дополнение к уроку

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

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

Я использую плагин 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 <= target.clientHeight) { // while looping parents, we"ll eventually reach document.body // since body doesn"t have a parent, we need to exit the while loop if (target == document.body) { break; } target = target.parentElement; } // we want this behaviour on elements other than the body if (target != document.body) { // if the scrollbar is at the top and yet if it still tries to scroll up // we prevent the scrolling if (target.scrollTop <= 0 && e.deltaY < 0) { e.preventDefault(); } // similarly, if the scrollbar is at the bottom and it still tries to scroll down // we prevent it else if (target.clientHeight + target.scrollTop >= target.scrollHeight && e.deltaY > 0) { e.preventDefault(); } } }; body { background: gainsboro; } #box { width: 300px; height: 600px; padding: 5px; border: 1px solid silver; margin: 50px auto; background: white; overflow: auto; }

Это самое простое решение, которое я получил до сих пор. И поверьте мне, я пробовал все остальные,и это самый простой. Он отлично работает на устройствах 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% уверен, что он работает в основных браузерах.

Задача

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

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

Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5 CSS2.1 IE Cr Op Sa Fx

В данном примере используется значение hidden , которое «обрезает» весь контент выходящий за рамки элемента.

Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y - для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

HTML5 CSS3 IE Cr Op Sa Fx

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.

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

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

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

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

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

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

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

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

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

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