高階前端進階(二)
阿新 • • 發佈:2021-11-08
恭喜EDG奪冠!!!
滾動條擠壓頁面問題(開胃小菜)
滾動條擠壓頁面,我們可能沒怎麼注意到這個問題。
直接看圖吧
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 class="container">
<diV class="main">main</diV>
<diV class="left">left</diV>
<diV class="right">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}