2017年9月

计算滚动条的宽度

在做一个图片放大功能,给html加上overflow:hidden之后发现网页会跳动

原因是hidden之后,滚动条消失,body的宽度就会增加。

看了一下知乎的实现,大概就是先计算出滚动条的宽度,当htmloverflow:hidden的时候,让html本身向右偏移,偏移的像素就是滚动条的宽度。同理,滚动条出现的时候,取消偏移。

滚动条宽度 = 窗口宽度 - 内容宽度

width = window.innerWidth - document.body.scrollWidth

移动端滚动穿透问题新解

今天遇到一个问题,就是在一个弹出层里面有一个可滚动的列表,当列表弹出层列表滚动的时候,原来的页面也跟着滚动了,体验相当不好。

在PC还好,可以给body一个overflow:hidden完事,在移动端却不管用啊

查了一下,这个叫移动端滚动穿透,一个大神给出了解决方案:点这里,感觉还是太麻烦了

然后自己琢磨了一番,想到了一个简单的处理方法。

既然滚动是因为内容超出了父级容器,那么就好办了,直接让内容不超出就好了。

直接让内容脱离文档流,使用position:fixed,当弹出层弹出的时候直接在body上加绝对定位position:fixed,当弹出层消失的时候,把原来页面的定位去掉。嗯,就这么简单。

看代码

- 阅读剩余部分 -

typecho图片上传失败解决办法

最近发现typecho上传图片一直失败,开始以为是uploads文件夹权限问题,后来权限改为777,根本没用啊,内心是崩溃的。

额,我又要水一篇了,后来查了一下,大致原因是开发版的typecho存在的一些bug,其中某个函数在检查是否在app engine上运行,获取环境变量的时候错了。

- 阅读剩余部分 -