我有一些问题滚动捕捉点与我的CSS

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;
}