Пустое пространство: Nowrap не работает хорошо, что я сделал не так?

Я делаю адаптивную веб-страницу, где при максимальной ширине 768 пикселей (через медиа-запрос) div внутри основного контейнера должен измениться на inline-block, чтобы страница прокручивалась горизонтально до идентификатора div, когда пользователь нажимает на ссылку. Страница настроена с переполнением: скрыто, поэтому она перемещается с использованием только идентификатора / привязки.

Проблема в том, что когда я делал предварительный просмотр на мобильном устройстве, контейнер просто растягивался, и я могу полностью пролистать страницу. Даже кнопка меню, которая должна находиться в центре порта просмотра, переместилась в центр контейнера. И оставляя огромный пробел под ним. Однако в настольном браузере все получилось. Так что я предполагаю, что все это связано с функцией nowrap.

Он работал в Firefox как для мобильных, так и для настольных компьютеров. Это работало на рабочем столе IE. Это не работает в Chrome Mobile, но, похоже, работает на настольном компьютере. И не удалось в Safari Mobile, еще не тестировали в настольных ПК.

Я попытался удалить пробелы: функция nowrap только для того, чтобы выяснить, что div не суммирует inline-block, как предполагалось. Я попытался указать ширину контейнера и минимальную ширину без удачи. Я попробовал float: left, значения позиций и кучу вещей, которые я не помню их всех. Ничего не меняется.

HTML

<div id="container">
  <div id="company" class="company">
    <iframe src="main.html">
    </iframe>
  </div>
  <div id="content" class="content">
    <iframe src="content.html">
    </iframe>
  </div>
  <div id="system" class="system">
    <iframe src="system.html">
    </iframe>
  </div>
</div>

CSS

body{
  overflow: hidden;
}
#container {
  height: 100vh !important;
  min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
  display: block;
  height: 100vh !important;
  min-height: 100vh !important;
}
@media screen and (max-width:768px) {
  #container {
    display: block;
    white-space: nowrap;
  }
  #container .company, #container .content, #container .system {
  display: inline-block;
  }
}
iframe {
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: none;
}

Чего я ожидал (рабочий стол Chrome) https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg

Но это происходит только на мобильных устройствах https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png

Ваша помощь очень ценится, и я вначале благодарю всех за помощь =).

Источник

2 ответа

По сути, у вас есть несколько проблем здесь:

  1. настройка overflow: hidden не будет препятствовать прокрутке браузера на мобильном устройстве (в Firefox это возможно, но в Chrome или iOS Safari - нет). Честно говоря, блокировка прокрутки на мобильных устройствах - это сложная задача, и она всегда немного хакерская, поэтому я бы так не поступил.
  2. Для достижения прокрутки (или прыжка), используя ссылки с #content и т.д., тело должно быть расширено, и браузер должен увидеть, где находится этот элемент. Расширение тела приведет к тому, что пользователь сможет прокручивать влево / вправо, что сложно заблокировать, как я упоминал ранее. Вы должны прокрутить #container показать новый элемент. Вы можете сделать это с помощью JavaScript.

Также не забудьте добавить overflow: hidden в #container (это будет работать на мобильном телефоне).

Если что-то все еще неясно, не стесняйтесь спрашивать в комментариях ниже этого ответа:)

Идея алгоритма для достижения вашей цели:

  1. Слушать hashchange событие
  2. Считать текущий хеш из window.location
  3. Найти элемент с заданным хешем document.querySelector
  4. Чтение позиции элемента внутри контейнера
  5. Задавать scrollLeft свойство контейнера быть равным положению элемента

Несколько полезных ссылок для начала:

И обновленный CSS:

body {
  overflow: hidden;
  margin: 0;
}

#button {
  position: fixed;
  vertical-align: center;
}

#button .btn1,
.btn2,
.btn3 {
  padding: 10px;
  display: inline-block;
}

#container .company,
.content,
.system {
  display: block;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
}

@media screen and (max-width:768px) {
  #container {
    display: flex;
    flex-flow: row nowrap;
  }
  #container .company,
  .content,
  .system {
    display: block;
  }
}


iframe {
  border: none;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
}
Источник

Возможно, что установка минимальной / максимальной ширины в #container поможет.

#container {
    min-width: 100vw;
    max-width: 100vw;
}

Кроме того, я бы предложил использовать flex здесь, так как он подходит и более современен.

Источник
Другие вопросы по тегам