概念

　　当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

语法

/* Keyword values */

scroll-behavior: auto;  // 滚动条立即滚动

scroll-behavior: smooth;  // 窗口平稳滚动

/* Global values */

scroll-behavior: inherit;

scroll-behavior: initial;

scroll-behavior: unset;

兼容性

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>锚点平滑跳转</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        html{

             scroll-behavior: smooth;

        }

        nav{

            width: 50%;

            height: 50px;

            text-align: center;

            position: fixed;

            left: 50%;

            transform: translateX(-50%);

            top: 0;

            background: green;

        }

        nav a{

            display: inline-block;

            line-height: 50px;

            color: #FFF;

            text-decoration: none;

            padding: 0 30px;

        }

        .box{

            width: 100%;

            text-align: center;

            font-size: 30px;

            color: #FFF;

        }

        #box1{

            background: #d00;

        }

        #box2{

            background: #42a4ff;

        }

        #box3{

            background: #008080;

        }

    </style>

</head>

<body>

    <nav>

        <a href="#box1">box1</a>

        <a href="#box2">box2</a>

        <a href="#box3">box3</a>

    </nav>

    <div id="box1" class=" box">box1</div>

    <div id="box2" class=" box">box2</div>

    <div id="box3" class=" box">box3</div>

    <script>

        onload = function(){

            const _Height = document.documentElement.clientHeight;

            const Box = document.getElementsByClassName('box');

            for (var i=0;i<Box.length;i++){

                Box[i].style.height = _Height + 'px'

                Box[i].style.lineHeight = _Height + 'px'

            }

        }

    </script>

</body>

</html>
详见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

CSS scroll-behavior属性： 滚动框指定滚动行为的更多相关文章

  1. CSS中behavior属性语法简介

    本文和大家重点讨论一下CSS中behavior属性语法的使用,在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,CSS中的behav ...

  2. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  3. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  4. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  5. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  6. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  8. Vue列表实现滚动到指定位置样式改变

    这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索 南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. ...

  9. ion-scroll 滚动框

    ion-scroll 声明一个可滚动的容器,需指定滚动区域和内容的大小 <ion-scroll>需要滚动的内容</ion-scroll> ion-scroll 有两个常用的可选 ...

随机推荐

  1. 自动化测试基础篇--Selenium简介

    摘自https://www.cnblogs.com/sanzangTst/p/7452636.html 一.软件开发的一般流程 二.什么叫软件测试? 软件测试(英语:Software Testing) ...

  2. echo 在shell及脚本中显示色彩及闪烁警告效果

    在shell脚本编写中,echo用于输出字符串等提示信息,当我们需要格外显示色彩及闪烁效果如下: 一.在执行shell中显示色彩: 语法格式: echo -e "\033[颜色1:颜色2m ...

  3. Win10安装sqlserver2014打开显示黑色界面，mardown打开显示报错

    问题描述: 我电脑从win7更新到win10以后就打开sqlserver2014显示黑色背景有问题,卸载了又装都是没有用 然后我又发现mardown也是有问题打开报告什么错误,忘记截图了,去网上找了个 ...

  4. gcc5.4报错对‘std::__cxx11::basic_string<char, std::char_traits<char>, std::allocator<char> >::~basic_string()’未定义的引用

    我在编译ligra是遇到了这个问题,网上搜了一遍,发现是了原因https://gcc.gnu.org/onlinedocs/libstdc%2B%2B/manual/using_dual_abi.ht ...

  5. Java操作Excel（使用JXL）

    一.本地操作 1.读取 package com.ljf.mb; import java.io.FileInputStream; import java.io.InputStream; import j ...

  6. 【Teradata】配置PE和AMP（congfig和reconfig工具、vprocmanager）

    The Reconfiguration and Configuration utilities are used to define the AMPs and PEs that operate tog ...

  7. 设计模式のCompositePattern(组合模式)----结构模式

    一.产生背景 又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式,它创建了对象组的树形结构. 这种模 ...

  8. 提升SQLite数据插入效率低、速度慢的方法

    前言 SQLite数据库由于其简单.灵活.轻量.开源,已经被越来越多的被应用到中小型应用中.甚至有人说,SQLite完全可以用来取代c语言中的文件读写操作.因此我最近编写有关遥感数据处理的程序的时候, ...

  9. 【转】Xposed出现 java.lang.IllegalAccessError: Class ref in pre-verified class resolved to unexpected implementation

    Xposed出现 java.lang.IllegalAccessError: Class ref in pre-verified class resolved to unexpected implem ...

  10. Linux：Day6(上) egrep、条件测试

    egrep及扩展的正则表达式: egrep = grep -E 扩展正则表达式的元字符: 或者:a | b 练习: 1.显示当前系统root.centos或user1用户的默认shell和UID: 2 ...