AOS.js动画时隐藏溢出(隐藏滚动条)

Question

我使用的是AOS.js ( scrollbars上的动画)，但是当元素在窗口之外时，滚动条就会出现。

很明显，如果我在主体或父元素中添加“overflow:隐含”，当窗口调整大小时，用户将无法滚动内容。

有谁知道怎么解决这个问题吗？如何仅在元素动画时隐藏溢出？

我在AOS.js文档中找到了这个，但是我不知道它是什么，放在哪里，以及这是为了我的问题还是别的什么原因。

JS Events - AOS在文档中分派两个事件: aos:in和aos: out，每当任何元素进入或输出时，您就可以在JS中执行额外的操作：

​

document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail);
});

​

Answer 1

如果我做得对，您希望将垂直和水平滚动条都隐藏在div或任何具有溢出的元素中:滚动

如果是，那么您可以简单地将其添加到css中以隐藏它们：

.your元素类名：：-webkit-滚动条{

宽度: 0px；

身高:0 0px；

}

预览：

​

.items {
  height: 80vh;
  width: 80vw;
  border: 5px solid black;
  background: #aae5fd;
  overflow: scroll;
  padding: 20px;
}

.items::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem eum quae quis animi vel nesciunt voluptate sint esse illo, laudantium reiciendis quibusdam explicabo dolores? Dolorem illo quod, odio architecto recusandae iste sit repudiandae magni minus
  assumenda enim fugiat doloremque doloribus possimus, perferendis expedita alias! Dolores possimus qui dolorum tempora iure dignissimos nisi sed ducimus aspernatur, maiores vel neque cupiditate porro, sit, obcaecati pariatur dolorem. Sint numquam nobis
  doloremque similique voluptates qui quo recusandae impedit nemo tempore, neque asperiores iste est saepe nihil molestias nesciunt cupiditate sed alias, ea hic eligendi quae. Et, asperiores dolores? Cupiditate harum enim, fugit dolores voluptatem ea
  optio eveniet vel laudantium sequi officiis error, aliquam laboriosam ipsum quos officia aut reprehenderit. Explicabo nam velit enim, consectetur eligendi perspiciatis cumque, ipsum fugit deserunt nisi, deleniti iure impedit quasi animi? Vero excepturi
  saepe, accusantium, ex enim, mollitia aliquid iste a quo impedit voluptate repudiandae! Laborum magni necessitatibus atque enim alias debitis architecto esse! Exercitationem veritatis sapiente minima dolor. Laboriosam provident cumque tempora officia
  harum eum, possimus fugit doloribus hic, pariatur, eos sunt consequatur. Itaque repudiandae, dolore quod dolorem, minus laborum odio illum facilis optio rem fugit delectus soluta? Asperiores iusto hic vitae magnam esse veniam nihil laboriosam est!Lorem
  ipsum dolor sit amet consectetur adipisicing elit. Quidem eum quae quis animi vel nesciunt voluptate sint esse illo, laudantium reiciendis quibusdam explicabo dolores? Dolorem illo quod, odio architecto recusandae iste sit repudiandae magni minus assumenda
  enim fugiat doloremque doloribus possimus, perferendis expedita alias! Dolores possimus qui dolorum tempora iure dignissimos nisi sed ducimus aspernatur, maiores vel neque cupiditate porro, sit, obcaecati pariatur dolorem. Sint numquam nobis doloremque
  similique voluptates qui quo recusandae impedit nemo tempore, neque asperiores iste est saepe nihil molestias nesciunt cupiditate sed alias, ea hic eligendi quae. Et, asperiores dolores? Cupiditate harum enim, fugit dolores voluptatem ea optio eveniet
  vel laudantium sequi officiis error, aliquam laboriosam ipsum quos officia aut reprehenderit. Explicabo nam velit enim, consectetur eligendi perspiciatis cumque, ipsum fugit deserunt nisi, deleniti iure impedit quasi animi? Vero excepturi saepe, accusantium,
  ex enim, mollitia aliquid iste a quo impedit voluptate repudiandae! Laborum magni necessitatibus atque enim alias debitis architecto esse! Exercitationem veritatis sapiente minima dolor. Laboriosam provident cumque tempora officia harum eum, possimus
  fugit doloribus hic, pariatur, eos sunt consequatur. Itaque repudiandae, dolore quod dolorem, minus laborum odio illum facilis optio rem fugit delectus soluta? Asperiores iusto hic vitae magnam esse veniam nihil laboriosam est</div>

​