css 缓冲滑动

hhhuuu009

已于 2022-02-13 11:47:53 修改

阅读量509

点赞数

文章标签： css

于 2022-02-11 14:07:55 首次发布

本文链接：https://blog.csdn.net/weixin_41883580/article/details/122879444

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           a {
           display: inline-block;
           width: 50px;
           text-decoration: none;
           }
           nav, .scroll-container {
           display: block;
           margin: 0 auto;
           text-align: center;
           }
           nav {
           width: 339px;
           padding: 5px;
           border: 1px solid black;
           }
           .scroll-container {
           width: 350px;
           height: 200px;
           overflow-y: scroll;
           scroll-behavior: smooth;
           }
           .scroll-page {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 100%;
           font-size: 5em;
           }
       </style>
   </head>
   <body>
       <nav>
       <a href="#page-1">1</a>
       <a href="#page-2">2</a>
       <a href="#page-3">3</a>
       </nav>
       <div class="scroll-container">
       <div class="scroll-page" id="page-1">1</div>
       <div class="scroll-page" id="page-2">2</div>
       <div class="scroll-page" id="page-3">3</div>
       </div>
   </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hhhuuu009

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 缓冲滑动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a { display: inline-block; width: 50px; ...
复制链接

扫一扫