Вопрос по css, flexbox, css3, css-grid, html – @SuddenlyRust Добро пожаловать ... и ответы тоже способ обучения, и я многому научился, просто помогая другим :)

4

ужна отдельная прокрутка для каждого из моих столбцов в сетке.

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

Книжная ориентация - только 1 столбец, и каждый элемент находится после другого. Здесь нет проблем.

В альбомной ориентации я хочу использовать 2 столбца. Весь мой контент отображается на левой стороне, а моя навигация перемещается на правую сторону. Теперь я хочу, чтобы обе части имели отдельный свиток. Есть ли способ реализовать это? И прокрутка должна остановиться, если содержимое текущего столбца заканчивается.

Код на CodePen:https://codepen.io/SuddenlyRust/pen/rmJOqV

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}

h1 {
  min-height: 200px;
}
<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

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

Ваш Ответ

2   ответа
2

Вот расширенная версия отмой ответ на ваш предыдущий вопросКак получить прокрутку для заголовка / содержимого / основного и навигации с помощьюflexbox.

Скрипка демо

Фрагмент стека

(function(d, timeout) {
  window.addEventListener("load", function() {
    resizeHandler();
  }, false);

  window.addEventListener("resize", function() {
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        // do resize stuff
        resizeHandler();
      }, 66);
    }
  }, false);

  function resizeHandler() {
    if (window.innerHeight < window.innerWidth) {
      if (!(d.body.classList.contains('landscape'))) {
        d.body.classList.add('landscape');
        d.body.appendChild(d.querySelector('nav'));
      }
    } else {
      if (d.body.classList.contains('landscape')) {
        d.body.classList.remove('landscape')
        d.querySelector('section').appendChild(d.querySelector('nav'));
      }
    }
  }
}(document));
html, body {
  margin:0;
}
header, footer, main, nav {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  min-height: 120px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}
footer {
  order: 2;
}
nav {
  order: 1;
}
section {
  display: flex;
  flex-direction: column;
}

@media only screen and (orientation: landscape) {

  main div {
    height: 400px;
    border: 1px dashed red;
  }
  nav div {
    height: 800px;
    border: 1px dashed red;
  }

  body.landscape {
    display: flex;
  }
  section {
    display: block;
    width: calc(60% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
  nav {
    width: calc(40% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
}
<section>
  <header>header</header>
  <main>content
    <div>
      This div get a height when in landscape to show scroll in section
    </div>
  </main>
  <footer>footer</footer>
  <nav>navigation
    <div>
      This div get a height when in landscape to show scroll in nav
    </div>
  </nav>
</section>

@SuddenlyRust Добро пожаловать ... и ответы тоже способ обучения, и я многому научился, просто помогая другим :) LGSon
Да, отличная работа @LGSon. Это работает отлично. Могу я задать вам несколько основных вопросов. Я не настолько опытен в JavaScript. Что на самом деле делает первая и последняя часть? "(function (d, timeout) {" and "} (document));" Вы всегда используете переменную d для манипулирования dom, но как она определяется? Я не понимаю синтаксис. И я не получаю переменную тайм-аута. Похоже, волшебство для меня. Код действительно имеет смысл, как вы перемещаете навигационную часть вокруг дерева. SuddenlyRust
@SuddenlyRust Я рекомендую не переписывать часть обработчика изменения размера и использовать событие изменения размера jQuery, потому что оно не имеетthrottler Функциональность моя есть, если вы, конечно, не добавите эквивалентный плагин. То, что я предоставил с простым javascript, оказывает меньшее влияние на производительность, и нет никаких реальных причин дляJQuery-фай это. LGSon
@SuddenlyRust The(function(d, timeout) {...})(); вызывает замыкание и оборачивает то, что в нем, чтобы оно не загрязняло глобальную область видимости переменными и прочим. Выполняется с последним(document) и гдеdocument (документ DOM) передается в качестве первого параметраd, Я сделал это вместо того, чтобы писатьdocument.body и т.д., я могу использовать корочеd.body,timeout используется в событии resize и, поскольку он передается таким образом, как параметр, он доступен через всю функцию замыкания, как и глобальная переменная. Надеюсь, это имеет смысл. LGSon
@SuddenlyRust Что-то вроде этого:codepen.io/anon/pen/PmdJGR ... хотя прекрасно использовать как jQuery, так и обычный javascript. О событиях анимации, вот хорошая статья:sitepoint.com/css3-animation-javascript-event-handlers LGSon
5

В альбомной ориентации я хочу использовать 2 столбца. Весь мой контент отображается на левой стороне, а моя навигация перемещается на правую сторону. Теперь я хочу, чтобы обе части имели отдельный свиток. Есть ли способ реализовать это? И прокрутка должна остановиться, если содержимое текущего столбца заканчивается.

В левом столбце у вас есть три отдельных элемента сетки:header, main а такжеfooter элементы.

В правом столбце у вас есть один элемент сетки:nav элемент.

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

Добавить полосу прокрутки - вертикальную или горизонтальную - в правый столбец довольно легко, потому что есть только один элемент.

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

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
  height: 100vh;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
  overflow: auto;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}
<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation<br><br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br></h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

пересмотренный кодекс

Браузерная поддержка CSS Grid

Chrome - полная поддержка по состоянию на 8 марта 2017 г. (версия 57)Firefox - полная поддержка с 6 марта 2017 г. (версия 52)Safari - полная поддержка с 26 марта 2017 года (версия 10.1)Edge - полная поддержка по состоянию на 16 октября 2017 г. (версия 16)IE11 - нет поддержки текущей спецификации; поддерживает устаревшую версию

Вот полная картина:http://caniuse.com/#search=grid

Большое спасибо @Michael_B за ваше время. Но это решение работает, только если навигация больше, чем левый контент. Моя навигация занимает только половину пространства левого контента. Я не уверен, что это действительно хорошо работает с макетами сетки. SuddenlyRust
Если вы можете обернуть левые элементы в один контейнер, то все станет намного проще. Просто используйте flexbox.codepen.io/anon/pen/jmZgEo?editors=1100 Michael_B
Почти работает. Но если я прокручиваю на левой стороне, моя навигация исчезает. Есть ли способ обернуть левый контент вместе? SuddenlyRust
Да, спасибо. Это была моя следующая идея использовать flex. Похоже, сетка не подходит для моего решения! Большое спасибо за ваше время @Michael_B вы очень помогли;) SuddenlyRust

Похожие вопросы