HTML и CSS: прокрутите Y, но держите X

У меня есть div main, который находится внутри wrapper, который можно прокручивать. Теперь я хочу иметь блок left слева от блока main. Я хочу, чтобы ось Y прокручивалась с помощью блока main, но когда я прокручиваю по горизонтали, она должна оставаться слева от «оболочки».

Я надеюсь, что в этом есть смысл.

Пока у меня есть это:

.wrapper {
    position: relative;
    background-color: lightgray;
    width: 500px;
    height: 500px;
    margin: 100px;
    overflow: scroll;
}

.left {
    position: absolute;
    width: 100px;
    height: 100%;
    left: 0;
    background: lightsalmon;
}

.main {
    position: relative;
    width: 1000px;
    height: 1000px;
    background-color: rosybrown;
}

<div class = "wrapper">

  <div class = "main">

    <div class = "left">
      LEFT
    </div>

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.

  </div>

</div>

Но я не знаю, как мне делать «палку слева от обертки». Возможно ли это с чистым HTML и CSS, или мне для этого нужен JavaScript?

javascript html css

15.09.2018 18:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это то, что вы хотите?

Использование блочной модели:

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 500px;
  height: 500px;
  margin: 100px;
}

.wrapper>div {
  display: inline-block;
  float: left;
}

.left {
  width: 100px;
  height: 100%;
  background: lightsalmon;
}

.main-wrapper {
  width: 400px;
  height: 500px;
  overflow: auto;
}

.main {
  width: 1000px;
  height: 1000px;
  background-color: rosybrown;
}

<div class = "wrapper">
  <div class = "left">
    LEFT
  </div>
  <div class = "main-wrapper">
    <div class = "main">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
    </div>
  </div>
</div>

Также может быть достигнуто с помощью модели flexbox:

.wrapper {
  display: inline-flex;
  width: 500px;
  height: 500px;
  margin: 100px;
}

.wrapper>div {
  display: block;
}

.left {
  flex: 0 0 100px;
  background: lightsalmon;
}

.main-wrapper {
  flex: 0 0 400px;
  overflow: auto;
}

.main {
  width: 1000px;
  height: 1000px;
  background-color: rosybrown;
}

<div class = "wrapper">
  <div class = "left">
    LEFT
  </div>
  <div class = "main-wrapper">
    <div class = "main">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
    </div>
  </div>
</div>

Условием (для обоих) является взятие .left вне .main и упаковка .main в его собственную оболочку overflow:auto (или scroll).

Если вы хотите, чтобы оба div'а прокручивались по горизонтали, я думаю, вам понадобится дополнительная оболочка:

.height-scroller {
  overflow: hidden auto;
  height: 500px;
  width: 500px;
  margin: 100px;
}
.wrapper {
  display: inline-flex;
  height: 1000px;
}

.left {
  flex: 0 0 100px;
  background: lightsalmon;
}

.main-wrapper {
  flex: 0 0 400px;
  overflow: auto;
}

.main {
  width: 1000px;
  height: 1000px;
  background-color: rosybrown;
}

<div class = "height-scroller">
  <div class = "wrapper">
    <div class = "left">
      LEFT
    </div>
    <div class = "main-wrapper">
      <div class = "main">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
      </div>
    </div>
  </div>
</div>

Спасибо! Я искал последнее решение, в котором оба варианта можно прокручивать. Еще один вопрос: как бы выглядело решение, если бы я хотел добавить div top, который прикрепляется к верху и прокручивается по оси X?

— 15.09.2018 20:32

15.09.2018 19:14

Вы можете добиться этого с помощью фиксированного меню. Ознакомьтесь с ответом. Я думаю, это то, что вы ищете. Так как левая полоса находится в положении fixed, остальным она попадется. Итак, вам нужно выровнять основную по правому краю.

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 500px;
  height: 500px;
  /*margin: 100px;*/
  overflow: scroll;
}

.left {
  position: fixed;
  width: 100px;
  height: 100%;
  left: 0;
  background: lightsalmon;
}

.main {
  position: relative;
  width: 1000px;
  height: 1000px;
  background-color: rosybrown;
  margin-left:100px;
}

<div class = "wrapper">

  <div class = "main">

    <div class = "left">
      LEFT
    </div>

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.

  </div>

</div>

Спасибо за помощь, но это не то, что я искал. См. Комментарий Devansh J, если вам интересно, что я искал.

— 15.09.2018 20:22

15.09.2018 19:15

Ответ принят как подходящий

Думаю, position: sticky - это именно то, что вам нужно. (с небольшим Flexbox)

Обновлять: добавил .top как хотели

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 500px;
  height: 500px;
  margin: 100px;
  overflow: scroll;
}

.main {
  width: 1000px;
  height: 1000px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

.main .top {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: sandybrown;
}

.main .middle {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.main .middle .left {
  position: sticky;
  width: 100px;
  left: 0;
  background: lightsalmon;
}

<div class = "wrapper">
  <div class = "main">
    <div class = "top">
      TOP
    </div>
    <div class = "middle">
      <div class = "left">
        LEFT
      </div>
      <div class = "right">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
      </div>
    </div>
  </div>
</div>

В случае, если кто-то также хочет, чтобы верхушка оставалась слева

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,body{
  height: 100%;
}

body{
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main{
  height: 500px;
  width: 500px;
  background-color: hotpink;
  display: grid;
  grid-template: 100px auto / 100px auto;
  overflow: auto;
}

.main .top{
  grid-column: 1 / span 2;
  position: sticky;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  padding: 20px;
  width: 500px;
}

.main .left{
  position: sticky;
  left: 0;
  background-color: rgba(0,0,0,0.3);
  color: #fff;
  padding: 20px;
}

.main .right{
  color: #fff;
  padding: 20px;
  width: 1000px;
  height: 1000px;
}

<div id = "app">
  <div class = "main">
    <div class = "top">TOP</div>
    <div class = "left">LEFT</div>
    <div class = "right">RIGHT</div>
  </div>
</div>

Спасибо! Это то, что мне было нужно. Еще одна вещь: я хочу добавить еще один элемент div top. Точно так же, как div left, но с прокруткой вверху по оси Y. Это не работает, когда я просто добавляю еще один div рядом с left со значениями css: `position: sticky; верх: 0; ширина: 100%; высота: 100 пикселей; фон: песочно-коричневый;

— 15.09.2018 20:20

@Jonas Добро пожаловать! Вам понадобится более сложный flexbox для вершины ... Я обновил ответ ...

— 15.09.2018 20:56

@Jonas Я только что понял, что верхняя часть не держится слева ... Думаю, у тебя это не сработает ... Я обновлю ответ еще раз ...

— 15.09.2018 21:03

Нет, это нормально, это то, что я искал. Верхний прилипает к левому краю, а левый - к верхнему. Большое спасибо!

— 15.09.2018 21:06

@Jonas Добро пожаловать! Я все равно добавил новое решение к ответу ... Также могу принять свой ответ, поскольку он сработал для вас ...

— 15.09.2018 21:17

Конечно! Большое вам спасибо за ваше время!

— 15.09.2018 21:21

@Jonas Без проблем, рад помочь!