Как включить прокрутку CSS как X, так и Y

Minseo Lee

9 августа 2021 в 05:00

223

Я искал несколько часов, но не нашел ответа, поэтому мне нужна помощь

Есть элемент div, предоставляет scroll-x

<div id='parent'>
   <div id='el1'></div>
   <div id='el2'></div>
   <div id='el3'></div>
</div>

Когда курсор мыши находится в этой области div, прокрутка y не работает

Пробовал =>

#id overflow: auto
#id overflow-x: auto, overflow-y: auto
#id overflow-x: scroll, overflow-y: scroll

Как я могу это решить?

html
css

Источник

Поделиться Скопировать ссылку Скопировано

Dai

9 августа 2021 в 05:04

overflow-y или просто overflow: auto

Minseo Lee

9 августа 2021 в 05:10

@Dai Вы имеете в виду overflow-y или overflow:auto в родительском элементе? На моем не работает

Blaze_droid

9 августа 2021 в 05:11

@MinseoLee использует overflow: auto для родителя div.

Minseo Lee

9 августа 2021 в 05:13

@Blaze_droid Не работает так же, извините

ale917k

9 августа 2021 в 05:21

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

Keshav Bajaj

9 августа 2021 в 05:23

@MinseoLee, вы можете попробовать overflow:scroll !important;, чтобы переопределить какой-то уже существующий стиль.

Jabal Logian

9 августа 2021 в 05:29

Я добавил рабочий код ответа. пожалуйста, чек.

Ответы (3)

Blaze_droid

9 августа 2021 в 05:21

Вот это может дать вам некоторое представление:

#el1, #el2, #el3 {
  width: 200px;
  height: 200px;
  background: lightblue;
  display:inline-block;
}

.parent {
  width:100px;
  height:100px;
  border: 2px dashed grey;
  overflow: auto;
}

<div class="parent">
   <div id='el1'>a</div>
   <div id='el2'>b</div>
   <div id='el3'>c</div>
</div>

Этот фрагмент работает так, как вы хотите?

Поделиться Скопировать ссылку Скопировано

Ibram Reda

9 августа 2021 в 05:32

Вот рабочий пример переполнения, вы должны установить свойства height и width в #parent, плюс вы должны установить свойство <54993333554884> в auto

если width любого дочернего элемента больше, чем ширина родителя, то он будет автоматически прокручиваться в направлении x

если общее количество height всех дочерних элементов больше, чем рост родителя, то он будет автоматически прокручиваться в направлении Y

#parent{
  background:#333;
  width:300px;
  height:300px;
  overflow:auto;
}

#el1{
  background:#999;
  height:200px;
  width:200px;
}

#el2{
  background:green;
  height:400px;
  width:400px;
}

#el3{
  background:yellow;
  height:400px;
  width:400px;
}

<div id='parent'>
   <div id='el1'></div>
   <div id='el2'></div>
   <div id='el3'></div>
</div>

Поделиться Скопировать ссылку Скопировано

Jabal Logian

9 августа 2021 в 05:26

Ключ находится в настройке height и width ваших родительских и дочерних элементов.

Горизонтальная прокрутка (ось X) может быть достигнута, если общая ширина дочерних элементов больше, чем ширина родительского элемента плюс использование overflow: auto для родительского элемента.

Вертикальная прокрутка (ось Y) может быть достигнута, если общая высота дочерних элементов больше высоты родительского элемента плюс использование overflow: auto для родительского элемента.

Вот рабочий код: https://codesandbox.io/s/kind-gates-djhnx?file=/src/styles.css

html файл:

<div id="parent">
  <div id="child-1">
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged. It was popularised in the 1960s with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions
    of Lorem Ipsum.
  </div>
  <div id="child-2">
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged. It was popularised in the 1960s with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions
    of Lorem Ipsum.
  </div>
  <div id="child-3">
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged. It was popularised in the 1960s with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions
    of Lorem Ipsum.
  </div>
</div>

CSS-файл:

#parent {
  overflow: auto;
  height: 300px;
  width: 300px;
  background-color: gainsboro;
}

#child-1 {
  overflow: auto;
  width: 500px;
  background-color: lightblue;
}

#child-2 {
  overflow: auto;
  width: 500px;
  background-color: lightgreen;
}

#child-3 {
  overflow: auto;
  width: 500px;
  background-color: lightcoral;
}

Поделиться Скопировать ссылку Скопировано