Как убрать полосу прокрутки css
Перейти к содержимому

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

  • автор:

CSS Убрать полосы прокрутки у абсолютно позиционированного элемента

vedro-compota's picture

Чтобы убрать полосы прокрутки, нам нужно чтобы как минимум:

  • 1) Родитель сам умещался в текущий размер (напр. ширина в 100%)
  • 2) На родителе стояло свойство overflow: hidden

При этом в нашем случае потомок позиционирован абосолютно, далее рассмотрим пример и решение

Как было (не работает, проявляется полоса прокрутки):

 
>Need no scroll!

.some-parent < background-color: rgb(153, 168, 250); overflow: hidden; width: 100%; height: 250px; >.absolute-child

Возможное решение

Добавляем промежуточного родителя, позиционированного относительно (relative):
HTML:

 
>Need no scroll!

.some-parent < background-color: rgb(153, 168, 250); overflow: hidden; width: 100%; height: 250px; >.relative-subparent < overflow: hidden; position:relative; height: 250px; >.absolute-child

Key Words for FKN + antitotal forum (CS VSU):

  • css
  • overflow hidden absolute child

Полоса прокрутки

overflow

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

 overflow : auto; overflow : scroll; overflow : visible; overflow : hidden; overflow : inherit; 

auto – автоматический параметр который добавляет полосы прокрутки только по необходимости.

scroll – при выборе этого параметра добавляется прокрутка на постоянной основе.

visible – данный параметр задаёт видимость всего содержимого элемента.

hidden – параметр задаёт отображение только внутри области элемента.

inherit – наследование значения родителя.

Полоса прокрутки overflow auto

 HTML 

В данном контейнере высота составляет сто тридцать пикселей, а ширина двести пикселей.

Так как объём текста превышает предел контейнера, появляется полоса прокрутки.

В данном контейнере высота и ширина составляет двести пикселей, а текст не выходит за пределы контейнера.

 CSS .box < width: 200px; overflow: auto; margin: 40px auto; padding: 5px 20px; border: solid 1px black; >.big < height: 200px; >.small

Свойство overflow CSS

 HTML 
Иногда в маленьком окне требуется показать код.

html, body
 CSS .box-code

Как сделать полосу прокрутки CSS

 HTML 
Прокрутка добавляется независимо от размера содержания.

 CSS .box-scroll

Как изменить полосу прокрутки CSS

 HTML 
Применив свойство visible, текст будет отображаться даже вне установленных габаритов.

Размеры этого контейнера, границы которого обозначены тонкой чёрной линией, составляютдвести сорок пикселей по ширине и сто двадцать пикселей по высоте.

 CSS .box-visible

Убрать полосу прокрутки CSS

 HTML 
Используя свойство hidden, текст будет скрыт, если он выходит за установленные границы.

Размеры этого контейнера, границы которого обведены чёрной линией, составляют двести пятьдесят пикселей по ширине и сто двадцать пять пикселей по высоте.

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

Сообщения: 7318
Благодарности: 1204

Конфигурация компьютера
Процессор: Intel Core i5-2500K (-> 4.2 ГГц)
Материнская плата: AsRock P67 Pro3 (Socket 1155)
Память: 2x4096 МБ DDR3-1333 Kingston (-> 1600 МГц)
HDD: Hitachi 2 ТБ + 0,75 ТБ (SATA2), SSD: OCZ Vertex3 (120 ГБ, SATA3)
Видеокарта: VTX3D Radeon 7950
Звук: Asus Xonar DS (PCI)
Блок питания: Chieftec CTG-550-80P (550 Вт, октябрь 2011)
CD/DVD: DVD-RW LiteOn iHAS124 (SATA2)
Монитор: Dell U2412M (24", 1920x1200, e-IPS)
ОС: Windows 7 Ultimate x64
Индекс производительности Windows: 7.6
Прочее: Кулер Zalman 10X Performa

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

Отключить полосу прокрутки во фрейме элементарно, просто добавьте атрибут

Убрать её из основного окна несколько сложнее. Во-первых, можно открыть окно с помощью JavaScript без активирования прокрутки:

Во-вторых, в некоторых броузерах (IE под Windows пятой версии и старше, а также броузерах на базе Gecko) можно использовать нижеследующую декларацию:

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

Сообщения: 512
Благодарности: 23

Это у меня было scroling="no" и фиксированная высота фрейма, только фрейм сразу скажу партнерский магазин и каждый вызов к примеру дополнительной информации о товаре появляется в этом окне и высота у каждого разная, чтобы сделать высоту помаксимуму наприкрепляв ссылок рекламы банеров по боковым столбам, таким образом увеличив окно фрейма до самого хедевского размера не хватает контента но так можно было бы сделать, тогда те заходящие на сайт могли бы видеть хоть картинки и ссылки гоняя фрем вниз вверх пока происходит загрузка и от этой идеи я отошел,

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

-------
не уверен, что знаешь наверняка, говори об этом заблаговремено )

Сообщения: 512
Благодарности: 23

Получилось и полоса прокрутки не видна и фрейм работает нормально, вот так походу можно её убрать, картинка по высоте фрейма

Выделить весь код

HTML код:

"kartinka.gif" style="position: absolute; right: 180; top:0;">

-------
не уверен, что знаешь наверняка, говори об этом заблаговремено )

Курсы javascript

Приветствую всех, уважаемые форумчане! Возникла задача избавиться от полосы прокрутки блока с фиксированной высотой при анимации контента. Первое что пришло в голову - создать функцию, которая отслеживает переполнение блока и вызывать ее часто (например, через каждые 20 мс) в процессе анимации контента. Идея не совсем нравится своей рациональностью, да и подмигивает полоса прокрутки в процессе анимации. Вот мой реализованные вариант - http://jsfiddle.net/98f3now9/

Прошу помощи подсказать как решить задачу рациональнее и правильнее. Заранее очень благодарен!

28.07.2015, 10:05
Регистрация: 19.08.2010
Сообщений: 14,109
28.07.2015, 10:07
Регистрация: 05.03.2012
Сообщений: 477

как вариант плавности.

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

28.07.2015, 13:55
Новичок на форуме
Регистрация: 28.07.2015
Сообщений: 4

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

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

Последний раз редактировалось Lifemaster, 28.07.2015 в 14:24 .
29.07.2015, 02:29
Новичок на форуме
Регистрация: 28.07.2015
Сообщений: 4
Уважаемые форумчане, неужели нет ни у кого мыслей по этому поводу?
29.07.2015, 10:06
Регистрация: 05.03.2012
Сообщений: 477

Оберните ( блок с полосой прокрутки ) блоком-родителем. Блок-родитель фиксирован по высоте + overflow: hidden + ширина его меньше, чем потомок на ширину полосы прокрутки( ширина скролл-бара ). Это скроет полосу прокрутки визуально. Все на css.

ПС^^: этот вариант легок в реализации, но вам он не подойдет. Слишком прост.

Последний раз редактировалось join, 29.07.2015 в 10:11 .
31.07.2015, 03:59
Новичок на форуме
Регистрация: 28.07.2015
Сообщений: 4

И так не подойдет, потому как в процессе анимации скрол то появляется, то исчезает (в зависимости от величины скрывающего контента) и еще ширину скролбара как определить без JS?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *