css怎么实现滚动效果-前端问答-PHP中文网

css怎么实现滚动效果

PHPz

发布： 2023-04-21 11:23:10

原创

2758人浏览过

css实现滚动效果

滚动效果通常用于网站页面设计中的各种交互、动画和导航。大多数常规的网站滚动效果可以通过HTML+CSS实现，此文将简单介绍其中几种实现方式。

利用overflow和position属性

HTML标签包裹内容（如div）的overflow属性为scroll，再利用position属性确定内容区域的位置，可以实现滚动效果。代码如下：

<div style="width:400px; height:200px; overflow:scroll; position:relative">
   <div style="width:600px; height:600px; position:absolute; top:0; left:0"> <!-- 内容区域 -->
     <!-- 内容部分 -->
   </div>
</div>

登录后复制

利用transform属性

使用transform属性的translateY或translateX可以实现滚动效果，将内容通过位移的方式进行滚动。代码如下：

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   transform: translateY(0);
   transition: transform 0.2s ease-out;
}

登录后复制

JS代码部分如下：

立即学习“前端免费学习笔记（深入）”；

let content = document.querySelector('.content');
let offsetY = 0; //内容向上偏移的距离
setInterval(() => {
   content.style.transform = `translateY(-${offsetY}px)`;
   offsetY += 1;
}, 50);

登录后复制

利用CSS动画

CSS动画可以把滚动效果做成简单而平滑的交互效果。代码如下：

.container{
   width:400px;
   height:200px;
   overflow:hidden;
}
.content{
   width:600px;
   height:600px;
   animation: scroll 5s linear infinite;
}
 @keyframes scroll {
   0% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(-400px);
   }
}

登录后复制

利用滚轮事件监听

通过监听滚轮事件并修改元素的scrollTop或scrollLeft值，可以实现手动滚动效果。代码如下：

<div style="width:400px; height:200px; overflow:scroll">
  <div style="width:600px; height:600px"> <!-- 内容区域 -->
    <!-- 内容部分 -->
  </div>
</div>

登录后复制

JS代码部分如下：

立即学习“前端免费学习笔记（深入）”；

let content = document.querySelector('.content');
let step = 100; //每次滚动的距离
document.querySelector('.container').addEventListener('wheel', function(event){
   event.preventDefault();
   content.scrollTop += event.deltaY > 0 ? step : -step;
});

登录后复制

总结

以上就是几种常见的css实现滚动效果的方式，使用时根据具体需求选择最合适的方式。利用CSS的实现方式不仅能简化代码，而且也能让网页更加流畅、动感，同时也方便进行用户体验、组件管理和调试。

以上就是css怎么实现滚动效果的详细内容，更多请关注php中文网其它相关文章！