文章关键字 ‘getBoundingClientRect’

划词评论与Range开发若干经验分享

2022年09月21日,星期三

万里挑一

如果你有类似划词评论的开发需求,本文内容不容错过,这可是外面很难找到的开发素材,暂时没有遇到类似需求也没关系,可以Star下项目,日后再说。

阅读全文…

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

2019年04月20日,星期六

scroll snap头图

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

阅读全文…

DOM基础小测27期答疑文字版-窗体滚动二三事

2019年01月26日,星期六

小测头图

本次小测借一个简单案例跟大家讲讲CSSOM视图模式(CSSOM View Module)相关的一些API及其特性,适用场景等,总结出一些最佳实践,明确一些技术细节,让技术更加精纯。

阅读全文…

小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

2018年02月2日,星期五

对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。

尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。

那么该如何实现呢?

阅读全文…

CSSOM视图模式(CSSOM View Module)相关整理

2011年09月9日,星期五


就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块草案。CSSOM视图模块(CSSOM View Module)定义了一些 API,Web 开发人员使用这些 API 可以进行检查,也可以以编程方式更改文档及其内容的视觉属性,包括布局框定位、视区宽度和元素滚动。

本文的内容就是将CSSOM视图模块相关的一些属性,方法等一个一个整理出来,包括兼容性,使用等等。每个API基本上都提供demo页面测试,使用的源代码展示等等。内容较多,请耐心阅读。相信本文的内容会对您的学习有所帮助的。

阅读全文…