对于一个宽度不固定的滚动容器，如果里面内容已经滚动到了一定的高度，这个时候滚动容器的宽度发生变化，则里面内容的位置会进行重定位，一不留神就不知道刚才的位置是哪里了。
尤其是看小说这种非常考验眼力的场景。于是，就有需求：当滚动容器尺寸发生变化的时候（如宽屏窄屏切换，或者默认尺寸变全屏时候），最上面元素位置要保持不变，这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。
那么该如何实现呢？
小tips: 纯CSS显示JS/HTML等源代码行数
2018年02月1日 by 阅读 28372 次, 今日 9 次如图，纯CSS显示JS/HTML等源代码行数，希望实现的方法可以给大家带来更多的思路和灵感。
CSS改变插入光标颜色caret-color简介及其它变色方法
2018年01月28日 by 阅读 57957 次, 今日 6 次有这样一个需求，改变输入光标的颜色，同时不改变输入框文字原本的颜色，在以前，如果产品经理提这样的需求，多半都会被开发一板子打过去。而如今，实际上已经有了天然针对此需求的属性caret-color。同时本文还会介绍其他一些改变光标颜色不改变文字颜色方法。希望本文能够对你的学习有所帮助。
详细了解CSS :focus-within伪类及其交互应用
2018年01月21日 by 阅读 39720 次, 今日 3 次:focus-within伪类原本设计的作用是原生表单元素focus时候，祖先<form>元素可以也有状态变化。
但是在我看来，:focus-within功能之强悍，远远不是仅仅和祖先<form>元素玩过家家这么简单。
理论上，只要页面上任意一个元素focus，通过:focus-within就能对页面上任意的元素进行样式控制…
借助HTML5 details,summary无JS实现各种交互效果
2018年01月15日 by 阅读 56892 次, 今日 5 次HTML5 details, summary这两个标签元素内置交互行为，我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然，前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。
瞎折腾：把JS,CSS任意文本文件加密成一张图片
2017年12月24日 by 阅读 48979 次, 今日 6 次周末在家就是应该放松的，我的放松手段很简单，就是学习前端知识，写写文章，抽个时间去钓鱼，完美。
本文内容就是一个临时起意的折腾，一个对JS，CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片，以及如何解密等。
希望本文的内容对您的学习有所帮助。
小tips: 0学习成本实现HTML元素粘滞融合效果
2017年12月21日 by 阅读 37017 次, 今日 4 次元素粘滞融合效果很酷，看上去很难实现，实际上实现却非常容易，几乎0学习成本，一起来看看究竟吧！
小tip: 了解LinearRGB和sRGB以及使用JS相互转换
2017年12月18日 by 阅读 35538 次, 今日 16 次LinearRGB顾名思义就是线性RGB颜色。
假设白板的光线反射率是100%，黑板的光线反射率是0%。则在线性RGB的世界中，50%灰色就是光线反射率为50%的灰色。
然而，人这种动物，对于真实世界的颜色感受，并不是线性的，而是曲线的……
深入理解SVG feDisplacementMap滤镜及实际应用
2017年12月14日 by 阅读 33757 次, 今日 6 次借助SVG feDisplacementMap滤镜可以实现非常有意思的水波效果。本文深入介绍feDisplacementMap滤镜的作用原理，同时展示其在实际项目中可以大规模实际应用的潜力。
canvas实现iPhoneX炫彩壁纸屏保外加pixi.js流体动效
2017年12月14日 by 阅读 63873 次, 今日 4 次iPhone X手机默认的壁纸是一个非常绚丽多彩的效果，实际上我们使用代码也能实现类似的效果，并且颜色可以定制，甚至我们可以加一些动效，比如说它的颜色像水一样的不断的流动流淌，像云雾一样翻腾。
本文将通过实际案例的方式展示这种效果，同时介绍如何在项目中使用这个效果，以及它实现的原理。希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用