Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
Chelovekkk
0 / 0 / 0
Регистрация: 17.04.2015
Сообщений: 36
#1

Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков

11.08.2016, 16:14. Просмотров 739. Ответов 3
Метки нет (Все метки)

Всем привет! Помогите решить проблему, пожалуйста. Есть блок div, внутри которого два блока div (в каждом из них по одной таблице), необходимо реализовать параллельную вертикальную прокрутку двух блоков и отдельную горизонтальную прокрутку одного из двух блоков, расположенных в общем блоке (посмотрите на рисунок 1, может понятнее станет).
Сделала следующим образом:
HTML5
1
2
3
4
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.div1 {
    height:400px;
    overflow-y: scroll;
    width:100%;
}
.div2 {
    width:50%;
    height:400px;
    float: left;
}
.div3 {
    width:300px;
    height:400px;
    float: right;
    overflow-x: scroll;
}
Вертикальная прокрутка получилась для всего блока, но для блока расположенного справа появилась своя и горизонтальная прокрутка и вертикальная(посмотрите на рисунке 2).
Как же это нужно реализовать? Посоветуйте, пожалуйста
0
Миниатюры
Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков   Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.08.2016, 16:14
Ответы с готовыми решениями:

Позиционирование и прокрутка блоков HTML CSS
Здраствуйте, есть проблема. У меня есть два дива. Див с id &quot;parent&quot; имеет...

Вертикальная прокрутка
Перерыл всё тысячу раз, не могу понять откуда взялась полоса вертикальной...

Горизонтальная прокрутка
Можно ли поставить overаflow только для горизонтальной прокрутки?

Горизонтальная прокрутка
Добрый день. У меня следующая проблема. Есть разметка &lt;div...

Горизонтальная прокрутка
Как создать эффект который есть на сайте google. При уменьшении размера окна...

3
mrtoxas
Модератор
Эксперт HTML/CSS
2557 / 1894 / 1180
Регистрация: 12.07.2015
Сообщений: 5,099
Записей в блоге: 3
11.08.2016, 17:05 #2
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrapper {
  width: 500px;
  height: 150px;
  border: 1px solid #ccc;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}
[class^="main-cell"] {
  float: left;
  width: 50%;
  height: 200px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 10px;
}
[class^="main-cell"] .cell-content {
  position: absolute;
  top: 0;
  left: 0;
}
.main-cell2 {
  overflow-x: scroll;
}
.main-cell2 .cell-content {
  width: 500px;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrapper">
  <div class="main-cell1">
    <div class="cell-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolore culpa laudantium ipsum beatae sapiente asperiores, animi, sit repellat eius voluptatibus numquam deserunt. Ad facilis provident architecto nisi officiis. Id.
    </div>
  </div>
  <div class="main-cell2">
    <div class="cell-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolore culpa laudantium ipsum beatae sapiente asperiores, animi, sit repellat eius voluptatibus numquam deserunt. Ad facilis provident architecto nisi officiis. Id.
    </div>
  </div>
</div>
Результат
0
Chelovekkk
0 / 0 / 0
Регистрация: 17.04.2015
Сообщений: 36
11.08.2016, 19:35  [ТС] #3
Спасибо! А возможно ли горизонтальную прокрутку сделать всегда в видимой области а не в конце вертикальной прокрутки?
0
mrtoxas
Модератор
Эксперт HTML/CSS
2557 / 1894 / 1180
Регистрация: 12.07.2015
Сообщений: 5,099
Записей в блоге: 3
11.08.2016, 19:49 #4
Добавьте
CSS
1
2
3
.main-cell2 {  
  height:100%;
}
Не совсем понятно, что должно получиться на выходе.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.08.2016, 19:49

Прокрутка одновременно двух div-ов
Добрый день! Подскажите, пожалуйста, как сделать одновременную прокрутку двух...

Горизонтальная прокрутка мышью
Делал горизонтальную прокрутку основываясь на этой статье...

Горизонтальная прокрутка фото
Здравствуйте! Скажите пожалуйста, можно ли как-то сделать горизонтальную...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru