首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

纯css实现纵向滚动固定表头与横向内容滚动

这次要实现的目标是类似这种,纵向滚动时表头固定,横向滚动时,表头跟着滚动 ?...首先想到的方案是最外面的div,outer加上overflow-x:auto ...滚动条被滚走了 然后想到了是用js来同步,可以是可以的,但是还是想挣扎一下。 之后想到了fixed,发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。...最后突然想到一个position的新属性,sticky 设置了position: sticky ,屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时...,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果(https://www.cnblogs.com/s1nker/p/4835079.html)。

4.9K00

仿腾讯课堂固定滚动列表ReactNative组件

- 80}},那这样滚动距离到120时,滚动条到底部了,视频播发控件的区域距离屏幕顶部还有80。...跑起来运行后发现的一个严重的问题是,如果Tab导航控件的内容区域存在ScrollView或者ListView时,无法滚动,只有最外层可以滚动,也就是手势滚动被拦截了?...属性发现其屏幕上的LocationOnScreenX坐标不同,如果当前滚动容器显示则等于0。...如何封装RN组件 参考 RN 0.51中文文档,我们需要做这些东西: 原生上要做的事 1.创建原生固定滚动控件 2.创建管理滚动控件ViewManager的子类 3.创建实现了ReactPackage...接口的类 JavaScript上要做的事 4.实现对应的JavaScript模块 开始动手 1.创建原生固定滚动控件 根据前面的分析,我们知道写原生滚动控件主要是重写控制拦截事件方法onInterceptTouchEvent

4.7K70

JS简易整页滚动

fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件 函数节流 DOM操作 2.示例GIF ?...CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的...Top 值, 实现滚动效果. html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position...向下滚动时, 当 currentPosition 比 -整体分页高度 大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove

15.3K31

JS判断滚动条是否停止滚动

背景:昨天一个同事有种需求,有一个展示数据区域的div,带滚动条,当滚动滚动时,需要向后台发请求,计算数据,再拿到前台展示。        ...分析:由于数据量级别较大,所以当滚动滚动时,如果时时向后台发请求,对服务器和浏览器都造成巨大的压力。想到的解决方案是,当滚动条停止时,再去发请求计算数据。...那么问题来了,如何判断滚动条是否停止了呢?        解决:搜索了一下,js本身是无法判断滚动条是滚动状态还是停止状态,只有通过其它方式了。...后来想到的思路是当滚动滚动的时候,发起一个定期执行的方法,并记录一次当前滚动条到顶部的距离,这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等,如果相等,那么说明停止滚动了,不相等,还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

17.2K00

摹客 XD 插件,支持固定区域切图!

本次更新,摹客协作部分,XD插件支持固定区域切图;设计稿与设计规范关联更紧密;团队管理进一步优化等。原型部分,新增离线编辑功能,再也不怕网络波动影响进度啦!另外还对组件和页面相关功能进行了优化。...关键信息 摹客协作 XD插件新增固定区域大小切图功能 开发模式中新增展示设计规范中颜色的变量名 支持批量添加整个部门成员参与项目 支持使用邮箱直接添加成员进入团队 文档中PDF支持缩放查看 Axure原型上传摹客后...,支持显示交互区域 左侧面板的节点图标的层次优化 摹客原型 支持离线编辑 支持分享演示链接时,自定义演示设置 表格—支持表格内数据的复制粘贴 摹客协作 XD插件新增固定区域大小切图功能 设计师或产品经理使用...XD时,常常会需要将大量图标切成固定大小。...插件上设置好需要切图的区域尺寸,就可以为设计稿一键切图,效率大幅提升! ?

82810

使用 fartscroll.js 让你的网页滚动时放屁

放屁绝对不是一个很高雅的行为,但是如果你比较喜欢恶搞,或者愚人节,或者是一些比较特殊的网页设计中,可以通过 fartscroll.js 这个插件让你的网页滚动的过程中 放屁。...直接打开 fatscroll.js 的官方页面(http://theonion.github.io/fartscroll.js/),滚动一下,你就可以听到了放屁声音了,你滚动的距离和速度不同,放屁的声音也不同...使用方法也很简单,先下载插件包,解压出来之后,在网页中引入 fartscroll.min.js 这个文件,然后配置下面的参数等,启用这个插件: // 文档中滚动 400 像素就放屁 $(document...).fartscroll(); // 文档中每滚动 800 像素就放屁 $(document).fartscroll(800); // 网页中没滚动 100 像素就放屁 $("body").fartscroll...(100); // 很多很多的屁 $("body").fartscroll(5); 仅供娱乐和恶搞哈,相信应该没有太多人喜欢访问你网页的时候,听到你网页放屁哈哈。

87620

mini react-window(一) 实现固定高度虚拟滚动

我们平常的开发中不可避免的会有很多列表渲染逻辑, pc 端可以使用分页进行渲染数限制,移动端可以使用下拉加载更多。...,看到的数据有限,在用户滚动时,指渲染可是区域内的内容即可,dom 少,渲染少 github 上也有很多针对 react 的虚拟滚动的库,我们这里对 react-window 的使用和实现,进行一下简单的学习分享...固定高度场景这种场景中我们已知每一项的渲染高度,可以根据渲染个数计算出整体高度,我们只需要对可是区域内的渲染进行渲染计算即可。...createLstComponent({})export default FixedSizeList实现 FixedSizeList 组件时我们要注意我们没有直接写, react-window 提供了固定高度非固定高的等几种虚拟滚动场景...图片本小节我们实现了固定高度虚拟列表,代码不是很多,感兴趣的小伙伴可以自己动手实现自己的虚拟滚动库,下一小节我们继续实现其他场景下的滚动列表,如有问题欢迎留言讨论。

1.6K50
领券