欢迎光临
我的个人博客网站

高级前端进阶(二)


恭喜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 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} 

四、恭喜EDG夺冠!!!

高级前端进阶(二)
高级前端进阶(二)

赞(0) 打赏
未经允许不得转载:张拓的天空 » 高级前端进阶(二)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏