时间戳

首页 > 解决方案 > CSS Snap Scroll，垂直滚动问题

css - CSS Snap Scroll，垂直滚动问题

问题描述

嘿，急需帮助解决一个问题的人，我已经花了几个小时试图解决这个问题。

处理一个非常自定义的 html、css 设计需要考虑很多。我担心有什么东西阻止了 CSS snap scroll 正常工作，我不知道为什么。

这是我的代码，我使用的是引导程序 4。

HTML：

<body>
 <main>

  <div class="container padding-top">

   <div class="snap-scroll-container">

    <section class="section snap-scroll-child">
     <div class="project-link-container">
      <img src="example">
     
     <h1 class="title">Testing</h1>
     </div>
    </section>

   </div>

  </div>

 </main>
</body>

CSS：

body {
        height: 100vh !important;
    }

main {
        has no styling;
    }

padding-top {
        padding-top: 100px;
   }

.snap-scroll-container {
        scroll-snap-type: y mandatory;
    }

.snap-scroll-child {
        scroll-snap-align: center;
    }

.section {
        position: relative;
        height: 390px;
        width: 690px;
        object-fit: cover;
    }

.project-link-container {
       has no styling
    }

.section img {
        width: 100%;
        height: 390px;
        object-fit: cover;
    }

.title {
        font-size: 72px;
        font-weight: 900;
        line-height: 0.9em;
        top: 45%;
        right: -38%;
        width: 700px;
        display: inline-block;
        transform: translateY(-50%);
        transition: 500ms;
        color: white;
        position: absolute;
    }

任何帮助都值得赞赏。

伊恩

标签： cssscroll

解决方案

尝试在 .snap-scroll-container 中添加一个高度值

推荐阅读