恭喜EDG奪冠！！！
滾動條擠壓頁面問題（開胃小菜）
滾動條擠壓頁面，我們可能沒怎么注意到這個問題，
直接看圖吧
看到沒有，滾動條差不多占據了17px左右的寬度，
計算公式為：
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實作圣杯布局或者雙飛翼布局的效果，
代碼很簡單，
<div >
<diV >main</diV>
<diV >left</diV>
<diV >right</diV>
</div>
/*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轉樹型資料（上一篇博客地址）
尋找樹型資料中的某個節點（包含所有的子節點）
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這三種方法，
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}
四、恭喜EDG奪冠！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353196.html
標籤：JavaScript
上一篇：JavaScript 定時器
下一篇：一文搞懂js中的typeof用法