WinNavigator

Frigate

Norton Commander

WinNC

Dos Navigator

Servant Salamander

Turbo Browser

Winamp, Skins, Plugins

Необходимые Утилиты

Текстовые редакторы

Юмор

File managers and best utilites

Изменяем вид полосы прокрутки в браузере. Часть 1. Как скрыть полосу прокрутки в браузере

Как скрыть полосы прокрутки при помощи CSS?

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

Как скрыть полосы прокрутки

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

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

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

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

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

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

HTML:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Убираем скролл </title> </head> <body> <div></div> </body> </html>

CSS:

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

html { overflow: hidden; }

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

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

Важно!!!

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

Послесловие

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

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

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

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

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

Недостатки:

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

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

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

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

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

Недостатки

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

Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов!!!

Оценок: 12 (средняя 4.3 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

vaden-pro.ru

Как скрыть не нужные элементы и убрать полосу прокрутки в адаптивке

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

Содержание.

Вводная часть.
Первая проблема.
Вторая проблема.

Введение.

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

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

Первая проблема- мне не нужно и надо скрыть.

Предположим у меня в мобильной версии нет сайт бара и подвала, я их просто убрал оттуда. Они мне не нужны, конечно можно оставить подписку, но я ее пока тоже снес, но дело не в этом. Сейчас научу вас, как избавиться от ненужных элементов из мобильной версии. Этот способ будет действовать везде, не только на вордпрессе, поехали.

Рассмотрю так же на сайт баре, предположим я хочу чтобы с отметки в 900 пикселей и до конца у меня убирался полностью вся боковая колонка и остался только сам контент, меню и шапка. А теперь смотрите сам процесс он очень легкий, находим тот элемент который хотите скрыть, далее опускаем глаза на и смотрим. уроки по адаптивному дизайну Для начала надо вывести самый классный инструмент в гугл хроме, это «посмотреть код». Жмем на том элементе который хотим убрать в адаптивке правой кнопкой мыши и выбираем нужную строку. И у нас появится снизу окошко мастера, далее смотрим на скриншот и к нему описание. два урока по адаптивному дизайну

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

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

А теперь встроим это стиль в медиазапросы для моего класса sidebar, как уже говорилось промежуток будет от 900 до 240, это самый маленький экран, смотрите запись и вникайте.

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

Минус этого способа, что объект все равно будет грузиться, просто не будет отображаться, как невидимка. Что конечно маленько повлияет на скорость загрузки, но если сделать все рекомендации что я говорю, это можно свести к минимуму.

Ладно переходим ко второму пункту, как узнать что мешает.

Вторая проблема- узнать что мешает.

Суть вся в том, когда сжимается окно браузера внизу появляется полоса прокрутки, это грубейшее нарушение, гугл просто откажется принимать ваш адаптивный дизайн. Вот пример ошибок (привел на блоге моего хорошего знакомого Андрея). полоса прокрутки которую надо удалить Адаптация у него есть, и причем она валидная. Я пользуюсь своим методом простого исключения. Давайте посмотрим на начинку через «просмотреть код» (это уже умеем, правой кнопкой мыши и вперед). Нажимать можете на любом месте, это не столь важно. Приступаем к самому сложному, главное вникните в саму суть. удаляем не нужное из адаптивного дизайна

Сама полоса прокрутки в процессе она будет уменьшаться и вообще исчезать.

Все что выводится на странице находится в разделе body, поэтому открываем это раздел и начинаем. Выбираем первый же подэлемент этого тега.
Нажимаем правой кнопкой мыши и выбираем «delete element».

В результате полоса прокрутки либо уменьшится, либо останется на своем месте. Если осталась как есть заначит переходим к следующему, и повторяем операцию.

Главное при каждом таком цикле, наблюдайте за полосой, она может увеличится, но не полностью исчезнуть (но все равно это место запомните), значит еще что-то мешает, и идете дальше.

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

wpsovet.ru

Изменяем вид полосы прокрутки в браузере

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

Интересный эффект о котором я писал раньше: Перетаскивание блоков используя jQuery.

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

Приступим к рассмотрению данных плагинов, которые изменяют вид полосы прокрутки в браузере.