Как отключить прокрутку в md-контенте или иметь минимальную высоту на мобильном

Question

Как отключить прокрутку в md-контенте или иметь минимальную высоту на мобильном

0

Я использую директивы md-content Angular Material для создания раздела, который сгибается, чтобы заполнить полезное вертикальное пространство и прокрутить его содержимое. Проблема заключается в просмотре страницы с помощью небольшого экрана, содержание сокращается до такой степени, что оно эффективно исчезает. Я хотел бы, чтобы md-контент прекратил прокрутку или имел минимальную высоту, чтобы отображалась панель прокрутки страницы, и пользователь все еще может видеть содержимое.

Обновление: здесь плункер, чтобы продемонстрировать проблему: https://plnkr.co/edit/NVbEHo0CPxX5Zzi4U88U?p=preview

  <body layout="column">
  <div>
    <h1>Header</h1>
  </div>
  <md-content layout="row">
    <div flex="50">Left Column</div>  
    <md-content flex="50" layout="column">
      <h2>Section Header</h2>
      <md-content layout="column" flex>
        <h3>Scroll Header</h3>
        <md-content flex layout="column" style="min-height: 300px">
          <md-content flex>
            scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
            scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
            scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
          </md-content>
        </md-content>
      </md-content>
    </md-content>
  </md-content>
</body>

Если окно браузера велико, прокручиваемое содержимое прокручивается, как ожидалось. Когда вы сокращаете браузер, md-content с прокручиваемым контентом сокращается до нуля.

Обновление 2: я обновил мой плункер с лучшим примером. Чтобы получить желаемый раздел прокрутки и сгибать его в нижней части окна просмотра, у меня есть все его родительские элементы как элементы md-content с атрибутом layout. Я могу установить min-height на прокручиваемом элементе, но когда браузер сокращается, теперь его родительский md-content имеет полосу прокрутки. Я мог бы добавить еще одну min-height в этот md-content, но это потребует от меня знать высоту его содержимого (что может быть динамическим).

В идеале, когда вы сокращаете браузер по вертикали, я бы хотел, чтобы прокручиваемый контент уменьшался до минимальной высоты, а затем изменял поведение всех его родительских элементов md-content чтобы не прокручивать, поэтому появляется только панель прокрутки body.

adam0101 05 янв. 2016, в 23:42

Источник

0

... и вы думаете, что мы можем помочь вам без минимального воспроизводимого примера ...
Andrei Gheorghiu 05 янв. 2016, в 22:02
0

@AndreiGheorghiu, я включил пример проблемы.
adam0101 06 янв. 2016, в 16:03
0

На некоторых устройствах первые два абзаца будут занимать весь экран. Так что вам нужно установить точку переполнения всей вашей страницы. Какой максимальный процент высоты окна могут занимать первые абзацы?
Andrei Gheorghiu 06 янв. 2016, в 17:00
0

@AndreiGheorghiu, я бы хотел, чтобы они занимали весь экран, если это необходимо. Я обновил свой вопрос, чтобы, надеюсь, дать лучшую картину проблемы.
adam0101 06 янв. 2016, в 19:18

Показать ещё 2 комментария

Теги:

html

angularjs

css

angular-material

2 ответа

Ещё вопросы

... и вы думаете, что мы можем помочь вам без минимального воспроизводимого примера ...
@AndreiGheorghiu, я включил пример проблемы.
На некоторых устройствах первые два абзаца будут занимать весь экран. Так что вам нужно установить точку переполнения всей вашей страницы. Какой максимальный процент высоты окна могут занимать первые абзацы?
@AndreiGheorghiu, я бы хотел, чтобы они занимали весь экран, если это необходимо. Я обновил свой вопрос, чтобы, надеюсь, дать лучшую картину проблемы.

kuhnroyal · Answer 1 · 2016-01-13T13-45-00.000Z

В примере и ответе есть 2 ошибки JavaScript. Угловой материал не загружается, так как md-content является директивой, что может вызвать проблемы. Кроме того, я точно не знаю, как это работает с угловым2, также есть угловая ошибка в консоли.

Я обновил пример до углового материала-1.0.0/angle-1.4.8 и добавил модуль и зависимость ngMaterial.

Теперь к вашей проблеме: обычно маленькая высота экрана также имеет небольшую ширину экрана, поэтому вы можете использовать точки разметки углового материала. В моем примере я использую xs/gt-xs breakpoint (ширина 599/600 пикселей) для переключения между макетами, применяя layout-xs/layout-gt-xs и flex-gt-xs. Маленькие устройства используют раскладку столбцов, а внешний md-content - это единственное, что прокручивается. Большие устройства используют раскладку строк и внутренние md-content.

angular.module('app', ['ngMaterial']);

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-app="app" layout-gt-xs="column">
  <md-content flex layout="column">
    <div>
      <h1>Header</h1>
    </div>
    <md-content flex-gt-xs layout="row" layout-xs="column">
      <div flex-gt-xs="50">Shrink the browser vertically to see the problem with the scroll bars. The parent md-content scrolls instead of the body.</div>  
      <md-content flex-gt-xs="50" layout="column">
        <h2>Section Header</h2>
        <md-content flex-gt-xs layout="column">
          <h3>Scroll Header</h3>
          <md-content flex-gt-xs layout="column">
            <md-content flex-gt-xs>
              scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
              scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
              scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
            </md-content>
          </md-content>
        </md-content>
      </md-content>
    </md-content>
  </md-content>
</body>
</html>

Вы могли бы лучше взглянуть на plunkr, материал макета трудно проверить во включенных фрагментах.

Andrei Gheorghiu · Answer 2 · 2016-01-05T19-28-00.000Z

Вам нужно минимальное значение высоты для вашего прокручиваемого столбца. Предположим, что 300px. Всякий раз, когда высота прокручиваемого столбца меньше этого значения, добавьте в body пользовательский класс, чтобы отключить flex и отобразить всю страницу в виде блоков, что позволяет пользователям прокручивать страницу в обычном режиме. В приведенном ниже примере я назвал этот класс noFlex.

Эта проверка должна выполняться JavaScript на window.load и на window.resize. CSS для отключения flex ниже работает для вашего примера, но для более сложного макета может потребоваться больше правил.

Обратите внимание, что я также отредактировал разметку, добавив класс theColumn к элементу, который я использовал для проверки высоты. Не стесняйтесь переносить этот класс на другой элемент и модифицировать решение в соответствии с вашими потребностями. Это всего лишь пример того, как я буду справляться с вашей проблемой.

document.checkColumn = function() {
  var column = $('.theColumn');
  if ((column.height() < 300) || $('body').height() < 400) {
    $('body>div').addClass('noFlex');
  } else {
    $('body>div').removeClass('noFlex');
  }
}
setTimeout(function() {
  document.checkColumn();
}, 100);
$(window).on('resize', function() {
  document.checkColumn();
});

.noFlex[layout="column"],
 .noFlex [layout="column"],
 .noFlex [layout="row"] {
   display: block;
   flex: initial;
 }
 .noFlex [flex="50"] {
   width: 100%;
 }

@media (min-height: 400px) {
  body>div[flex] {
    height: 100vh;
  }
}

<link data-require="material_design@*" data-semver="0.8.3" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css" />
<link data-require="material_design@*" data-semver="0.8.3" rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="material_design@*" data-semver="0.8.3" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>

<body>
 <div flex layout="column">
  <div>
    <h1>Header</h1>
  </div>
  <md-content layout="row">
    <div flex="50">Shrink the browser vertically to see the problem with the scroll bars. The parent md-content scrolls instead of the body.</div>
    <md-content flex="50" layout="column" class="theColumn">
      <h2>Section Header</h2>
      <md-content layout="column" flex>
        <h3>Scroll Header</h3>
        <md-content flex layout="column">
          <md-content flex>
            scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>scrollable content
            <br/>
          </md-content>
        </md-content>
      </md-content>
    </md-content>
  </md-content>
</div>
</body>
</html>