Свойство overflow:scroll — проблема?
Добрый день. Суть проблемы такова, после обновления браузера(CHROME), начал отображаться на элементе полоса скролла. В firefox все нормально, если нет переполнения элемента, скролл скрыт. Что там в хроме обновилось - непонятно- может кто с такой проблемой столктулся. Есть ли решение?
Дополнительно:
Так и должно быть https://developer.mozilla.org/en-US/docs/Web/CSS/o...
Значение scroll - всегда отображает полосу. а вы описываете желаемое поведение как у auto.
scroll
Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes.
- Тогда почему в других браузерах(не Хром), все нормально, scroll появляется только после переполнения. Да и в хроме до обновы было такое поведение.
-
scroll
Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.Здесь не чего не сказано , что они остаются, я так понял что у него такое-же поведение как и при auto с одним исключением - что текст не дергается при появление скролла
- Вячеслав, значение scroll всегда показывает скроллбар, вам подойдет auto
- Вячеслав, ну как же "не сказано", если написано прямо:
использует элементы прокрутки, не важно
Триста лет тому назад, когда я сам пользовался этим свойством, оно так и работало: scroll всегда показывал элементы прокрутки. Не думаю, что браузеры потом решили резко наплевать на спеку, а потом так же резко решили всё вернуть.
- Вячеслав, где не сказано? Я вам дал ссылку на надежный источник информации и даже процитировал и выделил жирным нужный текст, где как раз именно это и сказано.
- Кстати, действительно Firefox нынче не показывает скролбар, если проскролить нельзя. Но это потому, что у них такой UI - они скролбары из потока вытащили и они не влияют на контент.
Может кому пригодиться, если у Вас было так
.xx {
overflow-y: scroll;
}
,то теперь можно заменить на
.xx {
overflow-y: auto;
scrollbar-gutter: stable;
}
Поведение как у scroll(но только если ваш браузер обновился, как у меня), но без полос прокрутки, если блок не переполнился.
Новость прочитал, что браузер-ребята - начали гонку стандарта.
- в сафари до сих пор работает только при включении флага (и то – с сентября прошлого года). Я такие решения обычно не рекомендую.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Свойство overflow:scroll может вызывать проблемы в верстке, если его использование необходимо, но не правильно настроено. Это свойство позволяет добавить прокрутку к элементу, если его содержимое выходит за пределы размеров этого элемента. Однако, если не учтены некоторые аспекты, это может привести к нежелательным результатам.
Одна из проблем, с которой вы можете столкнуться, - это неправильное отображение содержимого из-за добавления прокрутки. Например, если ваш блок с содержимым имеет фиксированную ширину и вы добавляете прокрутку, то это может привести к появлению горизонтальной полосы прокрутки, которая может испортить внешний вид вашего сайта.
Еще одна проблема, которую может вызвать использование свойства overflow:scroll, - это возможность скрытия части содержимого из-за прокрутки. Это может быть особенно проблематично, если пользователи не могут увидеть всю информацию из-за неправильной настройки прокрутки.
Чтобы избежать подобных проблем, важно правильно настроить свойство overflow:scroll. Например, если вам нужна только вертикальная прокрутка, вы можете использовать overflow-y:scroll. Также важно учитывать размеры блока и его содержимое, чтобы убедиться, что прокрутка добавляется только в случае необходимости.
Пример использования свойства overflow:scroll в CSS для блока с вертикальной прокруткой:
.scrollable { width: 200px; height: 300px; overflow-y: scroll; }
Таким образом, свойство overflow:scroll не является проблемой само по себе, но неправильное его использование может привести к нежелательным результатам. Важно учитывать все аспекты верстки и правильно настраивать прокрутку, чтобы избежать возможных проблем.