一分钟小知识：scroll-behavior 让你的页面导航滚动更丝滑~

最新推荐文章于 2023-12-14 15:04:33 发布

weixin_30564785

最新推荐文章于 2023-12-14 15:04:33 发布

阅读量407

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/suni1024/p/11418700.html

版权

中午在【掘金】潜水摸鱼，看到这一个沸点，个人已经撸出特效；

下面放上作者的掘金地址 #掘金沸点# https://juejin.im/pin/5d649eaaf265da19752533db

效果图：

HTML：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>scroll-behavior让你的页面导航更加丝滑</title>
 9     <style>
10     div#app{width:100%;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ccc}
11     nav{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;align-self:center;justify-content:center;border:1px solid #ccc}
12     nav a{display:inline-block;flex:1;font-size:18px;text-align:center}
13     section.scroll-container{display:block;width:100%;height:400px;overflow-y:hidden;scroll-behavior:smooth}
14     div.scroll-page{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px;color:#fff}
15     div#page-1{background:saddlebrown;}
16     div#page-2{background:salmon;}
17     div#page-3{background:seagreen;}
18     </style>
19 </head>
20 
21 <body>
22     <div id="app">
23         <nav>
24             <a href="#page-1">page-1</a>
25             <a href="#page-2">page-2</a>
26             <a href="#page-3">page-3</a>
27         </nav>
28         <section class="scroll-container">
29             <div class="scroll-page" id="page-1">1</div>
30             <div class="scroll-page" id="page-2">2</div>
31             <div class="scroll-page" id="page-3">3</div>
32         </section>       
33     </div>
34 </body>
35 
36 </html>

转载于:https://www.cnblogs.com/suni1024/p/11418700.html

weixin_30564785

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一分钟小知识：scroll-behavior 让你的页面导航滚动更丝滑~

中午在【掘金】潜水摸鱼，看到这一个沸点，个人已经撸出特效；下面放上作者的掘金地址#掘金沸点# https://juejin.im/pin/5d649eaaf265da19752533db效果图：HTML： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head>...
复制链接

扫一扫