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

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

效果图：

HTML：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>scroll-behavior让你的页面导航更加丝滑</title>

     <style>

     div#app{width:100%;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ccc}

     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}

     nav a{display:inline-block;flex:1;font-size:18px;text-align:center}

     section.scroll-container{display:block;width:100%;height:400px;overflow-y:hidden;scroll-behavior:smooth}

     div.scroll-page{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px;color:#fff}

     div#page-1{background:saddlebrown;}

     div#page-2{background:salmon;}

     div#page-3{background:seagreen;}

     </style>

 </head>

 <body>

     <div id="app">

         <nav>

             <a href="#page-1">page-1</a>

             <a href="#page-2">page-2</a>

             <a href="#page-3">page-3</a>

         </nav>

         <section 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>

         </section>

     </div>

 </body>

 </html>

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

  1. 12个你未必知道的CSS小知识

    虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...

  2. ssh的两个小知识

    ssh的两个小知识 1. 在ssh客户端启动远程服务器的图形界面程序. 如果你试图在ssh客户端运行远程服务器的一个图形界面程序,比如说执行firefox,此时可能会提示,can not connec ...

  3. Linux小知识：sudo su和su的区别

    Linux小知识:sudo su和su的区别 本文是学习笔记,视频地址:https://www.bilibili.com/video/av62836363 su是申请切换root用户,需要申请root ...

  4. [C#.NET 拾遗补漏]02：数组的几个小知识

    阅读本文大概需要 1.5 分钟. 数组本身相对来说比较简单,能想到的可写的东西不多.但还是有一些知识点值得总结和知晓一  下.有的知识点,知不知道不重要,工作中用的时候搜索一下就可以了,毕竟实现一个功 ...

  5. 蓝牙Bluetooth技术小知识

    蓝牙Bluetooth技术以及广泛的应用于各种设备,并将继续在物联网IoT领域担任重要角色.下面搜集整理了一些关于蓝牙技术的小知识,以备参考. 蓝牙Bluetooth技术始创于1994年,其名字来源于 ...

  6. HTML+CSS中的一些小知识

    今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...

  7. iOS APP开发的小知识(分享）

          亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...

  8. Unix系统小知识（转）

    Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...

  9. salesforce 零基础开发入门学习（十）IDE便捷小知识

    在这里介绍两个IDE的便捷开发的小知识. 一) 本地调试 由于salesforce代码只能提交以后才能调试,所以很多时候调试代码很麻烦.新版增加了一个特性:即可以在本地调试相关的代码或者查看相关代码运 ...

随机推荐

  1. 27 August

    高精度 struct bigint{ int a[1000],an; bigint operator = (int b){ an=0; while (b){a[an++]=b%10;b/=10;} r ...

  2. Cisco Packet Tracer基本操作

    IOS主要模式模式 描述 提示符用户执行模式 路由器受限检查,远程访问 Router>特权执行模式 路由器的详细检查:调试和测试,文件处理,远程访问 Router#全局配置模式 全局配置命令 R ...

  3. Vue通信、传值的多种方式，详解（都是干货）

    Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287

  4. statistics——数学统计函数

    statistics——数学统计函数 转自:https://blog.csdn.net/zhtysw/article/details/80005410 资源代码位置:Lib/statistixs.py ...

  5. delphi 神经网络 学习

    https://github.com/uldercarrilho/ParallelNeuralNetwork

  6. 从有状态应用（Session）到无状态应用（JWT），以及 SSO 和 OAuth2

    不管用哪种方式认证用户,都可能被中间人攻击窃取 SessionID 或 Token,从而发生 CSRF 攻击.解决方式就是全站 HTTPS.现在 Let's Encrypt 已经支持免费的通配符 HT ...

  7. 下载工具 qBittorrent 使用

    官网地址,软件可以在官网上下载. GitHub 源码 知乎的参考链接 qBittorrent 是开源软件,支持用 BT 种子或种子的链接下载,也可以用磁力链接进行下载. 搜索功能 qBittorren ...

  8. mysql行锁和死锁检测

    行锁顾名思义,就是针对单行数据加锁,在mysql中,锁的实现是由引擎层实现的,MyISAM引擎就不支持行锁 不支持行锁就意味着并发控制只能使用表锁,也就是说同一时间,在这个表上只能有一个更新在执行,这 ...

  9. java注解编程@since 1.8

    一.基本元注解: @Retention: 说明这个注解的生命周期 RetentionPolicy.SOURCE -> 保留在原码阶段,编译时忽略 RetentionPolicy.CLASS -& ...

  10. dpkg:处理软件包 xxx (--configure)时出错

    9月 17 16:11:35 xiakaibi-PC systemd[1]: Starting LSB: Start Jenkins at boot time...9月 17 16:11:35 xia ...