Question

我有一个水平滚动网站，该网站在桌面浏览器上可以正常运行，但在移动设备上会出现故障。在移动设备上，当我尝试向右滑动时，除非我在最右侧滑动，否则它没有响应。即使这样，尽管声明了y-overflow隐藏和x-overflow滚动（参见CSS），各个div仍在滚动。

目标是创建一个水平站点，在该站点上绝对定位的背景div的一部分可见，并且随着用户向右滚动而变得更加可见。这是通过创建一个幻影div来实现的，该幻影div将在“水平容器”中滚动以显示（绝对定位的）second_section div。

我不确定这是固定的背景图像，-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;
}

iOS Web应用程序水平滑动（滚动）不滚动，但可以在桌面上成功滚动

0 个答案: