Результат, отличный от ожидаемого при использовании overflow: scroll

#html #css

#HTML #css

Вопрос:

На этой странице указано , что «браузеры всегда отображают полосы прокрутки независимо от того, обрезан какой-либо контент или нет».

Это не относится к # 2.
# 1 отображает полосу прокрутки, но только при прокрутке. По какой-то причине я был убежден, что он всегда будет там.

Я использую Chrome. Является ли такое поведение нормальным? Я неправильно истолковал MDN?

 div {
    height: 150px;
    width: 150px;
    padding: 5px;
    border: 5px solid red;
    overflow: scroll;
}

section {
    height: 150px;
    width: 150px;
    padding: 5px;
    border: 5px solid red;
    overflow: scroll;
}

 <body>
  <h1>1</h1>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium modi beatae explicabo officiis voluptatibus doloribus quae ipsam, voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</div>
  <h1>2</h1>
  <section>Voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</section>
</body>

смотрите это здесь YouTube

1. Какой браузер вы использовали, когда проверяли это?

2. Отлично работает в Chrome…

3. @yazantahhan Chrome

4. у вас установлено много расширений, проверьте их или попробуйте установить новый Chrome

Ответ №1:

Когда overflow включено scroll , браузеры всегда будут отображать полосы прокрутки независимо от того, действительно ли какой-либо контент обрезан вот и все, когда overflow установлено значение scroll поэтому, если вы хотите, чтобы содержимое не отображало полосы прокрутки, когда содержимое не переполнено, вы можете просто использовать auto при переполнении, например

overflow: auto;

 div {
    height: 150px;
    width: 150px;
    padding: 5px;
    border: 5px solid red;
    overflow: auto;
}

section {
    height: 150px;
    width: 150px;
    padding: 5px;
    border: 5px solid red;
    overflow: auto;
}

 <body>
  <h1>1</h1>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium modi beatae explicabo officiis voluptatibus doloribus quae ipsam, voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</div>
  <h1>2</h1>
  <section>Voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</section>
</body>

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

Пример

 div {
    height: 150px;
    width: 150px;
    padding: 5px;
    border: 5px solid red;
    overflow-y: scroll;
}

section {
    height: 150px;
    width: 150px;
    padding: 5px;
    border: 5px solid red;
    overflow-x: scroll;
}

 <body>
  <h1>1</h1>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium modi beatae explicabo officiis voluptatibus doloribus quae ipsam, voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</div>
  <h1>2</h1>
  <section>Voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</section>
</body>

1. вы ответили на мой вопрос?

2. Какой ответ вы ищете?

3. Я добавил видео в конец своего вопроса. Оба элемента имеют auto: scroll — это следующее ожидаемое поведение: полоса прокрутки # 1 отображается только при ее прокрутке, полоса прокрутки # 2 никогда не отображается

4. @tonitone120 возможно, это проблема вашего браузера, проверьте наличие обновления для сброса всех настроек

5. Решение № 4 в этой статье решило проблему 2. Что касается проблемы 1: является ли поле, которое не имеет переполнения и overflow: scroll должно отображать полосу прокрутки? guidingtech.com/fix-scroll-bar-not-showing-chrome /… .