返回文章列表

position sticky 失效问题

写了个图墙组件,其中用到了 sticky 做滚动固定。测试发现部分使用情况下会失效。搜了下,看到下面情况会导致 …

写了个图墙组件,其中用到了 sticky 做滚动固定。测试发现部分使用情况下会失效。搜了下,看到下面情况会导致 sticky 失效:
1、具有 sticky 属性的元素,其父级高度必须大于sticky元素的高度。
2、sticky 元素的底部,不能和父级底部重叠。
3、sticky 元素的父级不能含有 overflow:hidden 和 overflow:auto 属性。
4、必须具有 top,或 bottom 属性。
对应排查后,发现父元素上使用了 overflow:hidden,去除后问题修复了。

相关文章

相关阅读

  • 在 js 中使用 ts 的 module alias 功能

    介绍 js 代码中引用依赖的时候默认是使用相对路径,项目复杂后相对路径可能会用到非常多的相对层级,非常不方便,在 typescript 中可以在 tsconfig.json 配置的 compilerOptions 中配置 paths,实现别名功能: { "compilerOptions": { paths: { "@app/*": ["./src/*"] } } } 在 js 中默认是

    →
  • next-route-visualizer 包介绍

    今天 github 上看到一个 next-route-visualizer 的包,可以用来绘制 next 站点路由图表。看了下代码,核心方法有三个。 getRoutes 获取所有路由节点信息 positionTree 确定路由节点的显示位置 createNodesAndEdges 绘制节点和边的信息 将计算号的节点和边信息传递给 reactflow,用 reactflow 包来绘制图表。 通过这个

    →
  • 分享一个精简版Win10镜像

    这个镜像是荒野无灯大神制作的,目前有一个已知的 Bug 是没办法通过快捷键切换中文输入法。 我主要用来安装在威联通 Nas 中。在系统中安装百度网盘等下载工具,江网盘中的内容同步到 Nas 中。再后来,百度网盘换到通过 alist 挂载。家里也买了一台台式机,Nas 中的系统太消耗资源,也就不再开起来了。 这里将收藏的系统镜像分享给需要的人。

    →