Как мне создать сайт с горизонтальной прокруткой? - PullRequest
Новая
       33

Как мне создать сайт с горизонтальной прокруткой?

0 голосов
/ 15 сентября 2018

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

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

Чего я хочу достичь:

Навигационные ссылки должныбыть единственным способом навигации, и прокрутка не должна влиять на навигацию.

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

И последнее, но не менее важное: он должен быть в состоянии работать с Bootstrap 4.

Обратите внимание, что я не ожидаю, что кто-то сделает это полностьюпроект для меня, но, скорее, если кто-то может помочь мне или знает какие-либо ресурсы, которые я мог бы проверить, я был бы очень признателен!

Код: 

<html>
<body>
  <div class="bar">
    <div class="container-fluid">
      <div class="row">
        <div class="col text-left">
          <p>?</p>
        </div>
        <div class="col text-center">
          <span class="main-link">
            <a href="#" title="Download" target="_blank" class="hover">Download</a>
          </span>
        </div>
        <div class="col text-right">
          <p>?</p>
        </div>
      </div>
    </div>
  </div>

  <div class="main">
    <div class="container">
      <div class="row">
        <!--MODULE START-->
        <div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
          <p class="title">01</p>
        </div>
        <!--MODULE END-->

        <!--MODULE START-->
        <div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
          <p class="title">02</p>
        </div>
        <!--MODULE END-->
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="container">
      <p>Made by Jeroen</p>
    </div>
  </footer>

</body>
</html>
...