0

使用 CSS snap scroll 时，我遇到了一个奇怪的行为。对于 Safari 和 Firefox 没有问题，但它发生在 Chrome（桌面和移动）中。我正在尝试重新创建一个 Android ViewPager2，因此滚动中的每个元素都包含用户将与之交互的图像和文本。

会发生什么：对于具有 n 个元素的水平滚动条，如果您到达 n 然后向后滚动以与之前的元素之一进行交互，滚动条就会混淆。如果在向后滚动后您与第一个元素交互，它认为它仍然在最后一个元素上。如果在向后滚动后你与第二个元素交互，然后与第一个元素交互，它认为它仍然在第二个元素上。

有什么想法吗？

如果您在 Chrome 中使用它，这是一个捕获问题的粗略 Codepen：

https://codepen.io/augustus-vogel/pen/yLVmbma

您可以看到在到达末尾之前单击红色部分元素的正确行为（它将在上方显示一个带有蓝色关闭按钮的白色信息框）。单击蓝色框将其关闭（最好在再次滚动之前关闭，因为我没有在笔中添加观察者以自动关闭）。

要得到错误，来回滚动几次（确保到达最后一个元素（示例中的#4），然后单击第 1 节。它将打开信息容器 1，但滚动会跳转到最后一个元素元素，第 4 节。

谢谢你的帮助。

这是代码：

HTML：

<html>
<head>
    <title>Test case</title>
    <meta charset="UTF-8">
  
    <meta name="viewport" content="width=device-width, user-scalable=no">
    

</head>
<body onload="initialize()">

    <div id='datacontainer' class='datacontainer'>

    <div id='container' class='container'>
    
            <div id='scrollable' class='scrollable'>
        
        <section id="section1">
          <div id="totalcontainer1" class="totalcontainer">
            <div id="infocontainer1" class="infocontainer">
              <div id="closebutton1" class = "closebutton">Close Button 1</div>
              Info Container 1
            </div>
            <div id="sectioncontainer1" class="sectioncontainer">Section 1</div>
          </div>
        </section>
        
        <section id="section2">
          <div id="totalcontainer2" class="totalcontainer">
            <div id="infocontainer2" class="infocontainer">
              <div id="closebutton2" class = "closebutton">Close Button 2</div>
              Info Container 2
            </div>
            <div id="sectioncontainer2" class="sectioncontainer"> Section 2</div>
          </div>
        </section>
        
        <section id="section3">
          <div id="totalcontainer3" class="totalcontainer">
            <div id="infocontainer3" class="infocontainer">
              <div id="closebutton3" class = "closebutton">Close Button 3</div>
              Info Container 3
            </div>
            <div id="sectioncontainer3" class="sectioncontainer">Section 3</div>
          </div>
        </section>
        
        <section id="section4">
          
          <div id="totalcontainer4" class="totalcontainer">
            <div id="infocontainer4" class="infocontainer">
              <div id="closebutton4" class = "closebutton">Close Button 4</div>
              Info Container 4
            </div>
            <div id="sectioncontainer4" class="sectioncontainer"> Section 4</div>
          </div>
        </section>
                        
            </div>

        </div>
    </div>  
    
    
</body>
</html>

CSS：

.datacontainer{
  height:100vh;
  width:100vw;
  position:relative;
  background: yellow;
}

.container{
  height:25vh;
  width:100vh;
  position:absolute;
  bottom:0;
  left:0;
  background:green;
}

.closebutton{
  height:15vh;
  width:15vw;
  background:blue;
  position:relative;
  top:0;
  right:0;
  margin-top:5vh;
  margin-right:10vh;
  font-size:20px;
  padding:1vh;
  color:white;
}

.scrollable{
  width: 100vw;
    height:100%;
    position: absolute;
    bottom: 0;
    left: 0;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;

}

.scrollable section{
  height: 100%;
    flex: 100vw;
    scroll-snap-align: center;
}

.totalcontainer{
  width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  background:green;
}

.infocontainer{
  width: 98vw;
    height: 55vh;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 1vh;
    background:white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
    margin-bottom:20vh;
  font-size:20px;
  padding:2vh;
  display:none;
}

.sectioncontainer{
  width: 98vw;
    height: 23vh;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    background: red;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 18px;
  padding:8vh;
  color:white;
  font-size:25px;
}

JS：

function initialize (){
  
  $(document).on('click','.closebutton',function(){//button that closes info and pic windows
                                            
        var id = $(this).attr("id");
        var idnum = id.split('n').pop();

        $("#container").height('25vh');
        $("#infocontainer"+idnum).css({ display: "none" });  
        //$("#closebutton"+idnum).css({ display: "none" });

    });
    
    $(document).on('click','.sectioncontainer',function(){//info window open
                                            
        var id = $(this).attr("id"); 

        var idnum = id.split('r').pop();

        $("#container").height('100vh');
        $("#infocontainer"+idnum).css({ display: "block" });    
        //$("#closebutton"+idnum).css({ display: "block" });
    
    });
  
}
4

0 回答 0