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

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

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

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

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

    Недостатки

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    Это видео о том, как убрать полосу прокрутки при с просмотре и публикации сайта в программе 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%" ; }

    Удаление любой прокрутки: