overscroll-behavior
触发的场景：
当控制浏览器滚动到边界时
问题gif 演示：
当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
解决方法：
overscroll-behavior:contain
.dialog{
position: fixed;
z-index: 5;
width:200px;
height:200px;
border:1px solid;
left:50%;
top:50%;
transform: translate(-50%,-50%);
background-color: #eee;
overflow: auto;
font-size:14px;
color:#222;
overscroll-behavior-y: none;
/*或者
overscroll-behavior-y:contain;
*/
}
实现示例：
它的取值：
-
auto ： 默认值 滚动到边缘后继续滚动外部的可滚动容器。
-
contain ： 阻止滚动链。
-
none ： 和 contain 一样，但它也可以防止节点本身的滚动效果（例如 Android 炫光或 iOS 回弹）
contain和none的行为差异体现主要在移动端
默认Android 炫光或 iOS 回弹
overscroll-behavior-y:none
overscroll-behavior-x: none
可以禁止左右滑动的手势导航
兼容性：
IE 浏览器写法： -ms-scroll-chaining
参考链接：
developer.mozilla.org/zh-CN/docs/…
www.zhangxinxu.com/wordpress/2…
Scroll Snap
触发的场景：
网页容器滚动停止的时候，自动平滑定位到你希望用户关注的重点区域
实现方法：
容器scroll-snap-type，子元素scroll-snap-align
它的取值：
| 作用在滚动父容器上 | 作用在滚动子元素上 |
|---|---|
| scroll-snap-type | scroll-snap-align |
| scroll-snap-stop | scroll-margin/scroll-margin-(top/right/bottom/left)（用于精确定位） |
| scroll-padding/scroll-padding-(top/right/bottom/left) （用于精确定位） |
scroll-snap-type
应用范围：滚动父容器上 说明：确定是水平滚动定位，还是垂直滚动定位
第一个参数：指定哪个轴
- none ：默认值。表示滚动时候忽略捕捉点，不做任何操作
- x：捕捉水平定位点
- y：捕捉垂直平定位点
- block：捕捉和块状元素排列一个滚动方向的定位点
- inline：捕捉和内联元素排列一个滚动方向的定位点
- both：横轴纵轴都捕捉
第二个参数：指定形式
- mandatory 强制性
- proximity 浏览器在合适的情况下突然捕捉到某个位置
scroll-snap-stop
应用范围：滚动父容器上【还在实验阶段】 说明：是否允许滚动容器忽略捕获位置
- normal：可以忽略捕获位置
- always：不能忽略捕获位置
scroll-snap-align
应用范围：滚动子元素上 说明：捕获点是上边缘，下边缘，还是中间位置
- none：不定义位置
- start：起始位置对齐
- end：结束位置对齐
- center：居中对齐
demo.gif：
解释：在滚动操作时，在某一位置停止滚动后，根据设置的捕获点（start/center/end）来决定最终停留位置，Ep：捕获点设置为start,那么图片最终停留在该图片的上边缘位置
demo示例：
兼容性：
其他应用示例：
参考链接：
www.cnblogs.com/lonelyxmas/…
www.zhangxinxu.com/wordpress/2…
选择器:empty使用技巧
定义：
选择没有任何子级的元素（包括文本节点）
应用场景1：
针对后端返回的字段中有空值的情况，可以不用判断是否为空显示“暂无数据”
实现方法：
selector:empty
demo示例：
实现代码：
PS：有空格，不算为空
应用场景2：
比如渲染链接
实现方法：
selector:empty
demo示例：
以前的做法：
<a href="http://www.baidu.com">http://www.baidu.com</a>
可以用:empty
<a href="http://www.baidu.com" title="百度"></a>
a[href^="http"]:empty::before {
content: attr(href);
}
应用示例：
Math.trunc()
定义：
将数字的小数部分去掉，只保留整数部分
相对于Math.ceil()和Math.floor()的优点：对于数值的正负情况不一样时不用分别考虑了。
之前：
Math.floor(10.2) //10
Math.ceil(-10.2) // -10
现在：
Math.trunc(10.2) //10
Math.trunc(-10.2) //-10
与parseInt区别：
parseInt('100.2kg') // 100
Math.trunc('100.2kg') //NaN
对于trunc ，如果参数为字符串的话，内部会先使用Number将其先转为数值
其他示例：
Math.trunc(true) //1
Math.trunc(false) // 0
Math.trunc(null) // 0
参考链接：
developer.mozilla.org/zh-CN/docs/…
sticky
表面意思：粘性的，粘性定位可以被认为是相对定位(relative)和固定定位(fixed)的混合。 元素在跨越特定阈值前为相对定位，之后为固定定位
那么，什么是阈值呢？
假设我们设置：
nav{
position:sticky;
top:20px;
}
页面向下滚动时，nav的父元素div ，一旦视口的顶部与nav的距离小于20px（阈值），nav 就自动变为fixed定位。 页面继续向下滚动，父元素div彻底离开视口（即整个父元素div完全不可见），nav恢复成relative定位。
demo示例：
应用示例：
ps: 1，sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用 2，父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器
兼容性
参考链接：
developer.mozilla.org/zh-CN/docs/…
www.zhangxinxu.com/wordpress/2…
www.ruanyifeng.com/blog/2019/1…
开发者工具方面
1，查看animation 动画过程，可以有效查看动画的细节，方便调试
2，访问的图片可以直接获取base64，不用再找工具进行图片转换base64了
ES6 class
javascript中只有对象，没有类的概念，是基于原型的面向对象语言
为什么引入class?
class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
es5 构造函数生成实例的过程：
function Person(name,age) {
this.name = name;
this.age=age;
}
Person.prototype.say = function(){
return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("zhangsan",18);
es6 构造函数生成实例的过程：
class Person{
constructor(name,age){//constructor是一个构造方法，用来接收参数
this.name = name;//this代表的是实例对象
this.age=age;
}
say(){
return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
}
var obj=new Person("zhangsan",18);
注：不存在变量提升
//ES5可以先使用再定义,存在变量提升
new Person();
function Person(){}
//ES6不存在变量提升，否则会报错
new Person();//Person is not defined
class Person {}
其他说明
- constructor 可以不用写，是类的默认方法，new命令生成对象实例时自动调用该方法， 是用于接收参数。
- constructor外声明的所有方法都是定义在原型上的
- 在类中声明方法的时，不要给方法加function关键字
- 方法之间不要用逗号分隔，否则会报错
静态方法
class Person {
constructor() {}
static say(words) {
alert(words)
}
}
静态方法不在实例化对象的方法中，
因此里面不能有this，
使用方法：Person.say()
该方法不会被实例继承， 是直接通过类来调用
与如下代码等价
class Person {}
Person.say = function() {}
继承
super 既可以当作函数使用，也可以当作对象使用
当做函数用时：返回的是子类的实例，只能在子类的constructor里用
class Parent {
constructor(name) {
this.name = name;
}
}
class Child extends Parent {
constructor(name) {
//this.name = name; // ReferenceError
super(name);//子类的构造函数必须执行一次 super 函数，否则会报错。
}
}
//var parent = new Parent();
var child = new Child('金');
document.write(child.name)
注：
子类必须在constructor方法中调用super方法，然后再对其进行加工
只有调用super之后，才可以使用this关键字，否则会报错
demo示例：
当做对象用时：指向的是父类的原型，只能获取父类原型上的属性和方法
class Parent {
constructor(name) {
this.name = name;
}
say(){
document.write('我姓'+this.name+'，我可以说话了');
}
}
class Child extends Parent {
constructor(name) {
super(name);
}
test(){
super.say()
}
}
var child = new Child('金');
child.test();
