Прокрутите и Левый, и Правый делители, используя Вертикальный div внешней оболочки, а Правый - горизонтальная прокрутка - всегда видно - PullRequest
Новая
       46

Прокрутите и Левый, и Правый делители, используя Вертикальный div внешней оболочки, а Правый - горизонтальная прокрутка - всегда видно

2 голосов
/ 27 мая 2019

Мне нужен только Pure CSS Solution и без Jquery или Java-скрипта.Ваша помощь будет оценена.

Div Wrapper будет иметь высоту просмотра с вертикальной прокруткой (которая будет прокручивать как левый, так и правый div для вертикальной прокрутки).

Влево и вправо всегда будут одинаково расти вРост.И только Right Div нужно будет горизонтально прокрутить.Переполнение-x: прокрутка, и это должно быть всегда видно правый div горизонтальная прокрутка.

HTML-код: 

    <div class="main_wrap" style="padding-top:10px;">


        <div class="left">
              <!-- loop -->
              <div class="each_cell">
                <p>1</p>
              </div>

              <div class="each_cell">
                <p>2</p>
              </div>

              <div class="each_cell">
                <p>3</p>
              </div>

              <div class="each_cell">
                <p>4</p>
              </div>

              <div class="each_cell">
                <p>5</p>
              </div>

              <div class="each_cell">
                <p>6</p>
              </div>

              <div class="each_cell">
                <p>7</p>
              </div>

              <div class="each_cell">
                <p>8</p>
              </div>

              <div class="each_cell">
                <p>9</p>
              </div>

              <div class="each_cell">
                <p>10</p>
              </div>
              <!-- loop -->          
        </div>



        <div class="chatRooms">

              <div class="each_cell">
                  <div class="render_box">
                    Box
                  </div>
              </div>

              <div class="each_cell">
                <p>2</p>
              </div>

              <div class="each_cell">
                <p>3</p>
              </div>

              <div class="each_cell">
                <p>4</p>
              </div>

              <div class="each_cell">
                <p>5</p>
              </div>

              <div class="each_cell">
                <p>6</p>
              </div>

              <div class="each_cell">
                <p>7</p>
              </div>

              <div class="each_cell">
                <p>8</p>
              </div>

              <div class="each_cell">
                <p>9</p>
              </div>

              <div class="each_cell">
                <p>10</p>
              </div>

        </div>

</div>

Код CSS: 

    p{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif !important;
    color:#fff !important;
    font-size:14px !important;
    line-height:19px !important;
    margin-bottom:9px !important;
    text-decoration:none !important;
}

.each_cell{
  background:black;
  width:100%;
  height:39px;
  float:left;
  margin-bottom:3px;
}

.main_wrap {
    width:80%;
    background-color: #fff;
    border: solid 1px #a0b5ba;
    min-height: 100%;    
    height: 80vh;    
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    float:left;
    position: relative;
}

.left {
    background:red;
    width: 89px;
    text-align: center;
    position: absolute;
    z-index: 100;
}


.chatRooms{
    left:90px;
    width:100%;
    float:left;
    position: relative;
    overflow-x: scroll;
    white-space: nowrap;
}

.render_box{
  background:red;
  width:100px;
  height:20px;
  left:1500px;
  position:relative;
}

Пожалуйста, смотрите пример

...