Главная › Услуги › Как убрать скролл в браузере. Как скрыть полосы прокрутки? Как убрать полосу прокрутки. Описание проблемы

Как убрать скролл в браузере. Как скрыть полосы прокрутки? Как убрать полосу прокрутки. Описание проблемы

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

Убрать полосы прокрутки со страницы при помощи CSS

Метод основан на использовании CSS свойства overflow , которое определяет, как будет отображаться содержимое блочной структуры, если оно (содержимое) превышает размеры родительского элемента.

Из всех возможных значений данного свойства нас интересует значение «hidden »:

overflow: hidden;

которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло – скрыть»

Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.

Рассмотрим пример:

< html> < 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-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).

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

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

Недостатки

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

Это видео о том, как убрать полосу прокрутки при с просмотре и публикации сайта в программе 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"); а затем верните его в авто, когда анимация остановится, но было бы лучше, если бы полоса прокрутки была все еще видна, но неактивна.

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% уверен, что он работает в основных браузерах.

Перед тем как убрать полосы прокрутки (скроллбар) с 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-страницы и, не отпуская, двигаем вниз. Так происходит выделение содержимого и одновременно его прокрутка. Но этот метод, мягко говоря, не очень удобен, и рекомендовать его можно лишь в очень крайних случаях.

Задача

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

Решение

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Полосы прокрутки html { overflow: hidden; } div { height: 2000px; } Бла-бла

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

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

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

HTML5 CSS3 IE Cr Op Sa Fx

Полосы прокрутки html { overflow-x: hidden; } div { min-width: 800px; /* Минимальная ширина */ background: #fc0; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ } Бла-бла

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