Question

我正在尝试用幻灯片制作快照效果，但是滚动快照效果在我的CSS中不起作用

我已经尝试过将display：inline;在CSS的内部div中。

<div id="projects">
    <h2 class="heading">Projects</h2>
        <div class="slider">
            <div class="slide" id="slide-1">
                1
            </div>
            <div class="slide" id="slide-2">
                2
            </div>
            <div class="slide" id="slide-3">
                3
            </div>
            <div class="slide" id="slide-4">
                4
            </div>
            <div class="slide" id="slide-5">
                5
            </div>
        </div>
    </div>

#projects{
    padding:50px 15px;
    border-bottom:1px solid #dcd9d9;
    text-align:center;
}

.slider {
    width: 100%;
    height: 550px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-white-space: nowrap;
    white-space: nowrap;
    -webkit-scroll-snap-type: mandatory;
    -webkit-scroll-snap-points-x: repeat(100%);
    scroll-snap-type: mandatory;
    scroll-snap-points-x: repeat(100%);
}

.slide {
    width: 100%;
    height: 550px;
    flex-shrink: 0;
    display: inline;
}

#slide-1 {
    position: relative;
    background-image: url(../images/1.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-2 {
    position: relative;
    background-image: url(../images/2.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-3 {
    position: relative;
    background-image: url(../images/3.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-4 {
    position: relative;
    background-image: url(../images/4.jpeg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

#slide-5 {
    position: relative;
    background-image: url(../images/5.jpg);
    background-size:cover;
    padding:15px;
    overflow:hidden
}

该网站的工作方式就像是一张长照片，您可以将其一直滚动到最右边，这里有五个。但是它没有效果，您可以稍微滚动一下，然后从第一到第二。我正在尝试制作捕捉效果。

Answer 1

scroll-snap-type-x:是非标准的，通常不起作用。参见here。并且您需要在子元素上设置捕捉点。

.slider {
  //supported way to set snap mandatory on the horizontal axis
  scroll-snap-type: x mandatory;
  -webkit-scroll-snap-type: x mandatory;
}

.slide {
  //snap align center
  scroll-snap-align: center;

  //force stop on each element
  scroll-snap-stop: always;
}

我的CSS滚动捕捉点出现问题

1 个答案: