如何使用CSS在Vue CLI页面中使用滚动捕捉？

问题描述

我在使用CSS在vue js应用程序中实现滚动捕捉时遇到麻烦。我得到的问题是，在实现滚动对齐之后，运行页时样式正常工作，但是滚动对齐不起作用，而且我也收到了一个新的滚动条，其中没有带有滚动条的滚动条，如图

所示。但是当我在.html文件上运行它时，相同的html和css代码可以正常工作。有人可以帮我吗？谢谢 这是我的代码...

<template>

   <div class="container">

        <section id="home">
          <h1>Welcome To My Site</h1>
          <p class="lead">Lorem ipsum dolor sit,amet consectetur adipisicing elit. Commodi,quis!</p>
        </section>
        <section id="about">
            <h1>About</h1>
            <p class="lead">Lorem ipsum dolor sit,quis!</p>
        </section>
        <section id="service">
            <h1>Service</h1>
            <p class="lead">Lorem ipsum dolor sit,quis!</p>
        </section>
        <section id="contact">
            <h1>Contact</h1>
            <p class="lead">Lorem ipsum dolor sit,quis!</p>
        </section>
      </div>
       
</template>
<style scoped>
        * {
  margin: 0;
  padding: 0;
}



.container {
  width: 100%;
  height: 100%;
  /* CSS Smooth Scroll */
  overflow-y: scroll; 
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;

}


section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
 
  /* Scroll Snap */
   scroll-snap-align: center; 
}

section h1 {
  font-size: 4rem;
}

/* Section Images */
section#home {
  background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;;
}

section#about {
  background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;;
}

section#service {
  background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;;
}

section#contact {
  background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;;
}

</style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）