滚动条挤压页面问题
滚动条挤压页面，我们可能没怎么注意到这个问题。
直接看图吧
看到没有，滚动条差不多占据了17px左右的宽度。
计算公式为：
|
1 2 3 4 |
let container = document.getElementById("container"); let scrollWidth = container.offsetWidth - container.clientWidth; console.log('scrollWidth', scrollWidth); // 谷歌浏览器滚动条占据17px |
如何让滚动条不挤压页面呢？
overflow还有个值就是overlay，相当于让滚动条悬浮。这个方法只适用于谷歌浏览器。
还有个方法很自然能够想到，既然滚动条占据17px，那通过margin-right: -17px，不就行了，专门弄出17px给滚动条即可，然后页面padding-right: 17px，这样就不会出现挤压页面的问题了。
本质就是滚动条占据了容器的17px宽度，根据这个可以衍生出很多方法。
所谓一生二，二生三，三生万物。本质上是不变的。
一、CSS中的圣杯布局跟双飞翼布局
这两种布局都是三栏布局，而且实现的效果都是一样的，中间的一块宽度自适应，并且是先加载。
圣杯布局跟双飞翼布局，这两种布局方式，我们应该或多或少接触过。以前主要是通过浮动float来实现的，但现在有了flex，以前的方式就不香了，毕竟有更好的布局方式了。
在这里，着重讲解一下，通过flex实现圣杯布局或者双飞翼布局的效果。
代码很简单。
|
1 2 3 4 5 6 |
<div class="container"> <diV class="main">main</diV> <diV class="left">left</diV> <diV class="right">right</diV> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*scss*/ .container{ display: flex; justify-content: center; .main{ flex-grow: 1; order: 2; background-color: red; } .left{ flex-basis: 200px; order: 1; background-color: orange; } .right{ flex-basis: 200px; order: 3; background-color: paleturquoise; } } |
浏览器是从左到右解析代码的，所以我们要让main部分在最左边，然后通过order来处理位置。让flex-grow来实现自适应效果。
简单吧！
二、复习一下上次讲解的有关递归知识
list转树型数据（上一篇博客地址）
寻找树型数据中的某个节点（包含所有的子节点）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function findTreeNode(tree, fn, childrenName) { if (childrenName == undefined) childrenName = 'children'; for (let item of tree) { if (fn(item)) return item; if (item[childrenName]) { let res = findTreeNode(item[childrenName], fn); if (res) return res; } } } let treeNode = findTreeNode(listToTree(treeList), (item) => item.id == 1);// 使用的是上篇博客的数据 console.log("treeNode", treeNode);// {"id":1,"pid":0,"name":"一级数据1","children":[{"id":4,"pid":1,"name":"二级数据2-1"},{"id":5,"pid":1,"name":"二级数据2-2"},{"id":6,"pid":1,"name":"二级数据2-3"}]} |
三、改变this指向问题
复习一下，apply，call，bind这三种方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function test(item) { console.log(item); } var param = { q: 1, w: 2 }; test(param); test.apply(null, [param]); test.call(null, param); test.bind(null, param)();// 以上四者是等价的 // 更改this指向 var obj = { param: { z: 6 }, newTest(item) { console.log(this.param) //console.log(item); } } obj.newTest.apply(this, [param]);// 等价于 obj.newTest.apply(window, [param]);// 输出 {"q":1,"w":2} obj.newTest.apply(obj, [param]);// 输出 {"z":6} |