Горизонтальная прокрутка (прокрутка) веб-приложения для iOS не прокручивается, но может успешно прокручиваться на рабочем столе - PullRequest
Новая
       17

Горизонтальная прокрутка (прокрутка) веб-приложения для iOS не прокручивается, но может успешно прокручиваться на рабочем столе

0 голосов
/ 02 ноября 2018

У меня есть веб-сайт с горизонтальной прокруткой, который отлично работает в настольных браузерах, но работает со сбоями на мобильных устройствах. На мобильном телефоне, когда я пытаюсь провести пальцем вправо, это не отвечает, если я не проведу пальцем в крайнее правое положение. Даже в этом случае отдельные элементы div, кажется, прокручиваются, несмотря на объявление скрытого y-переполнения и прокрутки x-переполнения (см. CSS).

Цель состоит в том, чтобы создать горизонтальный сайт, где часть абсолютно позиционированного фонового элемента будет видна и становится более видимой, когда пользователь "прокручивает" право. Это достигается созданием фантомного div, который будет прокручиваться в «горизонтальном контейнере», чтобы показать (абсолютно позиционированный) div second_section.

Я не уверен, что это фиксированное фоновое изображение, проблема -webkit-overflow-scrolling, проблема переполнения или что-то еще. Любое руководство о том, как подойти к этому, будет высоко ценится :).

HTML: 

  <div id = "horiz_container">
            <div id = "first_section" class = "card" data-section-name="welcome">
            </div>


    <div class = "green_bar">

                <img class = "swipe_indicator" src = "./img/indicator_arrow.svg" style = "max-width: 100%;" />
            </div>

            <div id="second_section" class = "card">

            </div>

<!-- Swipe buffer is a transparent 100vw div used to show the absolutely-positioned element located behind the first div -->
        <div class = "swipe_buffer"></div>

            </div>

CSS: 

#horiz_container{
    display:-webkit-box;
    display: -webkit-flex;
    display:-ms-flexbox;
    display:flex;
    --webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    z-index: 20;
    -webkit-overflow-scrolling: touch;
 &::-webkit-scrollbar {
    display: none;
  }
}
#first_section{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: inline-block;
    background-image: url('./img/an_image.jpeg');
    background-size: cover;
    background-attachment: fixed;
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 5;
    overflow-x: scroll;
}

#second_section{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: inline-block;
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    z-index: -1;
    position: fixed;
    width: 100vw;
    overflow-y: hidden;
}

.swipe_buffer{
    opacity: 0.4;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100vw;
    overflow-y: hidden;
    white-space: nowrap;
}

.green_bar{
    height: 100vh;
    background-color: #129660;
    width: 75px;
    display: inline-block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    z-index: 2;
}
...