文章关键字 ‘滚动’

如何实现页面刷新后不定位到之前的滚动位置?

2022年05月30日,星期一

间谍过家家

原来让页面刷新的时候不定位到刚才的滚动位置是有优雅至极的方法的,学习了!

阅读全文…

flex-end为什么overflow无法滚动及解决方法

2021年12月8日,星期三

flex-end与overflow

解释下为何 flex 布局中, flex-end 对齐不会触发 overflow 滚动效果,以及介绍解决方法,希望可以帮到遇到类似场景的人。

阅读全文…

纯CSS实现标题栏、表格头水平滚动垂直不滚动

2021年06月14日,星期一

滚动鑫空间粘性定位占位图

本文介绍如何使用纯CSS方法,实现某个元素在水平滚动的时候跟着滚,垂直滚动的时候固定效果,反之同样适用,丰富demo,有视频效果示意,希望可以帮到您的学习。

阅读全文…

尝试使用JS IntersectionObserver让标题和导航联动

2020年12月1日,星期二

南瓜封面图

学习了下JS中非常适合实现懒加载和无限固定加载的IntersectionObserver API,并自己给自己出难题,使用此API实现基于文档标题生成导航的插件功能。本文有自己实现过程完整记录,不一样风味的技术文章,内容较长,希望可以对大家学习有所启发。

阅读全文…

深入理解position sticky粘性定位的计算规则

2020年03月7日,星期六

sticky布局效果缩略图

sticky粘性定位规则比较复杂,涉及“流盒”(flow box)和“粘性约束矩形”等概念,如果不搞清楚原理,是无法明白明明设置了粘性定位样式却没有效果的原因的。

阅读全文…

CSS overscroll-behavior让滚动嵌套时父滚动不触发

2020年01月5日,星期日

小鱼儿占位图

要实现窗体不跟着子元素滚动的交互效果,有专门的CSS – overscroll-behavior,本文就通过真实案例,配合精心制作的GIF介绍这个CSS新特性,快来学习吧,说不定第二天就能在实际项目中使用咯。

阅读全文…

小tips: 元素focus页面不滚动不定位的JS处理

2019年09月19日,星期四

focus滚动定位占位图

有时候我们希望元素被focus的同时浏览器的不会发生滚动重定位,看起来似乎是个很棘手的问题,毕竟focus重定位是一个很重要的浏览器内置的用户体验行为,实际上,大家可能不知道,已经有新的API参数支持这种需求了。

阅读全文…

更好的纯CSS滚动指示器技术实现

2019年06月8日,星期六

滚动指示器封面图

我们可以使用纯CSS显示页面滚动百分比进度,传统实现是在body标签上做文章,但有致命缺陷,后来我借助混合模式实现了一种新方法,此方法可以规避传统实现的不足,使纯CSS滚动指示器效果在实际项目中应用成为了可能。

阅读全文…

CSS scroll-snap滚动事件停止及元素位置检测

2019年04月20日,星期六

scroll snap头图

CSS Scroll Snap是个非常好用的特性,可以让滚动停止的时候,无需任何JS代码,自动平滑定位到指定元素的指定位置。但实际开发的时候,发现很多场景还需要知道滚动什么时候停止,以及到底滚动到哪个元素上,浏览器目前还没有原生的方法支持,需要我们使用JS进行辅助处理……

阅读全文…

使用document.scrollingElement控制窗体滚动高度

2019年02月22日,星期五

介绍一个更加兼容、更加标准的设置窗体滚动高度的方法,那就是document.scrollingElement,兼容性足矣在实际项目中应用。JS基础API,人人必须了解的特性,学到就是赚到。

阅读全文…