Прокрутка дочернего div в родительском div
Некоторая предыстория
Я использую виджеты Гридстер для веб-страницы. Эти виджеты отображаются под таблицей HTML. Таблица помогает идентифицировать некоторую информацию для каждого виджета. Виджеты представляют собой элементы html <li>, размещенные в <ul>.
Виджеты динамически генерируются из json (поэтому их количество не фиксировано).
Мой желаемый результат
Поскольку виджеты генерируются динамически, виджетов может быть слишком много. В этом случае веб-страница становится слишком большой, и пользователь не может видеть таблицу HTML.
Итак, я хочу, чтобы та часть, в которой находятся виджеты, должна была прокручиваться, а таблица HTML была зафиксирована на своем месте.
Благодаря этому, даже когда пользователь хочет увидеть виджеты, которые находятся внизу, он может видеть таблицу HTML с ним.
Что я пробовал до сих пор
Я сделал <div> для той части, в которой находятся виджеты, и дал им свойство overflow:scroll, но даже тогда он не работает так, как я ожидал
Мой HTML
<div class = "content-wrapper">
<div class = "row">
<div class = "col-md-12 grid-margin stretch-card">
<div class = "card">
<div class = "card-body">
<h4 class = "card-title">My Webpage</h4>
<p class = "card-description" style = "color:black;">
Zone for Gasoline:A, Year :2018
</p>
<div class = "row">
<div class = "col-md-12">
<div class = "btn-group btn-block mb-4" aria-label = "steps">
<div class = "col md-4">
<a href = "/app/step-1/"> <button type = "button" class = "btn btn-block btn-outline-secondary"> Step 1 </button> </a>
</div>
<div class = "col md-4">
<a href = "/app/step-2/"> <button type = "button" class = "btn btn-block btn-outline-secondary" > Step 2 </button> </a>
</div>
<div class = "col md-4">
<a href = "/app/step-3/"> <button type = "button" class = "btn btn-block btn-primary"> Step 3 </button></a>
</div>
</div>
</div>
</div>
<table border = "1" class = ".table-responsive">
<tr>
<th colspan = "4" style = "background-color:#eedd82;">Zone 1</th>
<th colspan = "4" style = "background-color:#eedd82;">Zone 2</th>
<th colspan = "4" style = "background-color:#eedd82;">>Zone 3</th>
</tr>
<tr>
<td width = "400" align = "center" style = "background-color:#0085ca">T1</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T2</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T3</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T4</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T1</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T2</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T3</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T4</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T1</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T2</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T3</td>
<td width = "400" align = "center" style = "background-color:#0085ca">T4</td>
</tr>
</table>
<!--Gridster widgets will appear here below table-->
<div class = "gridster father">
<ul class = "child">
</ul>
</div>
Прошу прощения за такой большой HTML-код. В HTML вы можете видеть, что ниже <table> я присвоил класс father элементу <div> и child элементу <ul>.
Для них обоих я попробовал следующий CSS (индивидуально и вместе)
.father{
overflow:scroll;
}
.child{
overflow:scroll;
}
Но я не давал того эффекта "прокрутки", который хотел.
Скрипка, представляющий то же самое
Любая помощь будет очень признательна
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Адаптивные таблицы так не пишутся. Это вот так :
<div class = "table-responsive">
<table class = "table">
...
</table>
</div>
Предполагая, что вы хотите применить прокрутку, чтобы обеспечить отзывчивое поведение на небольших дисплеях, таких как мобильный телефон, прокрутка переполнения должна быть применена к родительскому элементу таблицы, чтобы включить такую прокрутку.
HTML:
<div class = "parent">
<ul class = "child">
...
</ul>
</div>
CSS:
.parent {
overflow: scroll;
}
Для лучшего восприятия мы, вероятно, хотим, чтобы эта прокрутка выполнялась только слева направо (ось y), а не сверху вниз (ось x), нам также необходимо установить это, и поэтому необходимо соответствующим образом настроить наш CSS.
.parent {
overflow-y: scroll;
}
В вашем примере похоже, что классы отца и потомка применяются к построению сетки как неупорядоченный список (<ul>) с маленькими значками автомобилей. Этот <ul> определяет высоту и высоту родительского элемента, поэтому в большом достаточно окна, чтобы таблица не прокручивалась. Однако если вы сжимаете окно, родительский элемент расширяется только до ширины окна, что является ожидаемым поведением div. На этом этапе дочерний элемент прокручивается.
Если вы хотите применить то же поведение к элементу .table-responsive, вам необходимо применить тот же принцип. Оберните таблицу в родительский элемент и примените переполнение соответствующим образом. Вы не хотите помещать overflow-scroll в саму таблицу, но вы можете указать минимальную ширину таблицы или применить фиксированную ширину, например width: 300px;.
HTML:
<div class = "parent">
<table class = "table-responsive">
...
</table>
</div>
CSS:
.parent {
overflow-y: scroll;
}
.table-responsive {
your styles
}
Если вам нужно исправить размеры родительского элемента, чтобы элемент не определял размер окна, вы можете сделать что-то подобное с помощью своего CSS
.parent {
overflow: scroll;
width: 400px;
max-width: 100vw;
height: 400px;
max-height: 100vh;
}
.table-responsive {
your styles
}
В этом случае ваша ширина в идеале должна быть 400 пикселей в ширину, но никогда не должна превышать ширину области просмотра и никогда не превышать высоту 400 пикселей, но никогда не превышать высоту области просмотра. Если вы хотите стать еще умнее со своей высотой, вы можете использовать вычисление для максимальной высоты, чтобы это окно никогда не превышало определенную высоту с учетом других элементов на странице.
@NewBie Вы можете исправить размер родительского контейнера, указав высоту и ширину. Дочерний элемент будет прокручиваться, если он превышает эти размеры, будь то ширина или высота.
Это не обязательно с мобильным телефоном. Это может быть и на рабочем столе. Моя основная цель состоит в том, чтобы там было много виджетов. «Коробка» или «контейнер», в которых они находятся, должны оставаться фиксированного размера. Моя веб-страница не должна расширяться в зависимости от этого. на виджетах