平时的开发语言基本上都会用到迭代器，有的叫遍历器，有的叫枚举，都是一个意思，就是将我们的集合或者特定的结构，通过遍历器能够访问到其允许访问的所有成员，这就是遍历、迭代器了

js 看着简单，但是里面有很多很多的细节，多到我们学习过程中，很多的细节都接触不到，甚至一些有事还是挺重要的，甚至能够帮我们减少一些逻辑 有时网上看文章刷视频，总是能从一些前辈们口中得知一些小知识

前言

我们在封装弹窗时，有时会出现，我们弹窗后面的滚动页面仍然可以滚动，我们希望的是，弹层起来时，页面后端的滚动内容停止滚动，这样我们的弹窗效果看起来优先级更高，体验更好

我们可能会考虑监听滚动事件，将滚动事件阻止，取消弹层后取消监听事件

默认使用(问题初现)

function handler(e) {
    e.preventDefault();
}

window.addEventListener("wheel", handler);
window.removeEventListener('wheel', handler)

可是上面设置了之后，在一些浏览器中，会出现一堆错误事件，仍然无法阻止滚动的默认行为

此时就和浏览器的优化有关了，有些浏览器，会默认开启事件优化，因此会忽略用户的一些设置的一些行为，其中就包括阻止事件的 preventDefault 行为

解决方案(关闭游览器默认的事件优化)

那么我们怎么做呢？

只需要设置监听的第三个参数 passive: false 即可

这个参数有被动的优化的意思，passive 默认为 true，也就是默认被动开启浏览器事件优化，其会阻止一些用户行为

当设置为 passive: false 的时候，意味着取消被动优化，也就是开发者可以自行做一些操作，停止优化，此时被优化的的 preventDefault 取消滚动事件，就可以生效了

function handler(e) {
    e.preventDefault();
}

window.addEventListener("wheel", handler, {
    passive: true, //默认为true
});
window.removeEventListener('wheel', handler)

overflow方案：有时候我们也会采取更原始的方案解决问题，那就是设置 overflow，可以取消页面的滚动事件，此时就解决问题了(很多直接取body节点取消，弹窗结束恢复)，但也😂有一个问题，就是取消 overflow 后滚动条会消失而闪动，追求细节的有的直接隐藏滚动条了

元素尺寸问题由来

前端开发中，由于页面的元素渲染要经过一些流程，通过不同的方法会获取到不同流程阶段的元素的信息(主要是尺寸信息)，这部分信息由于随着渲染阶段的改变，信息也可能会发生改变(当然也可能不变)，因此元素的尺寸就有必要介绍了

下面就从不同阶段介绍元素尺寸

渲染步骤

元素渲染过程中，会经过下面步骤

1. dom 树，此时 dom 树的属性就是我们设置的初始属性，可以直接获取dom读取，dom.style.width, 例如：style="width: 200px"
2. cssom 计算树，样式计算阶段，也就是 通过 getComputedStyle 获取样式计算后的数据，比如我们设置了 200px，但其是基准属性，在弹性盒子中，可能会被压缩，因此会发生变化
3. layout tree 布局树，浏览器呈现出来的树，里面包含了布局出来的实际几何属性，可以通过 clientWidth(content+padding 元素宽度)、offsetWidth(content+padding+scroll+border内容+边界偏移)、scrollWidth(visibile+invisibile出现滚动内容，滚动内容)等，此时已经渲染，因此获取 dom 的这些信息也会强制渲染回流，由于开始布局，因此也会浪费性能，可以根据情况使用
4. 展现阶段，此时才能看到展现到用户眼中的尺寸，layout tree 看不到变换后的效果，transform 不在布局树中，它属于变换，例如： transform: scale(2, 2)； 变成了两倍，前面的 200px就变成了 400px，或者旋转后，包围盒子也会变宽等，使用 dom.getBoundingClientRect() 方法可以获取元素展现时的尺寸，由于要等到展现，所以已经会强制渲染回流，浪费性能，可以根据情况使用

我们平时的 text 文本基本上都是横向布局的，但是有些诗歌文艺范的内容，很多文本都是垂直布局的，那么我们怎么布局呢， css 中有个属性 write-mode 可以

writing-mode: horizontal-tb; //默认水平方向布局
writing-mode: vertical-lr; //垂直方向布局，从做往右分列延伸
writing-mode: vertical-rl; //垂直方向布局，从右往左分列延伸

效果就像下面那样 MDN-write-mode

我们以前应用布局的时候，经常会参考父元素，因此写文章很多基本上也会提到相对于父元素，实际上很多我们严重的父元素，其更精确的概念应该是包含块，因为单纯的父元素他不精确，有些是浮动元素或者定位元素，就不是明显的父子关系了

包含块确定规则

• 常规元素和浮动元素父元素的内容盒
• 绝对定位 absolute: 第一个定位祖先的填充盒（padding + content）
• 固定定位 fixed:
  • 无变形祖先-往上找找不到使用了 transform 的父元素，其就是包含块就是视口
  • 有变形祖先-包含块有的祖先使用了 transform，就是变形祖先，包含块就是变形祖先

ps：看了fixed 这些是不是感觉天塌了，以前学的定位不太准了，实际上不是的，只是我们接触到得更深了，也能避免更多问题了，下面的 fixed 变形祖先实际上平时根本接触不到，因此按照以前总结也没啥问题，就当牛顿和爱因斯坦理论在合适的地方使用就好了，碰到了我们也知道咋回事就行了

我么更新一下我们的知识点，父元素换成包含块就正确了，否则全是不准确的哈

• 元素的 width 百分比相对的是 父元素 包含块 宽度
• 元素的 height 百分比相对的是 父元素 包含块 高度
• 元素的 margin 百分比相对的是 父元素 包含块 宽度
• 元素的 padding 百分比相对的是 父元素 包含块 宽度
• 元素的 left 百分比相对的是 父元素 包含块 左边缘
• 元素的 top 百分比相对的是 父元素 包含块 右边缘