程序员经验分享-hwhale

位置：滚动一定量后粘性不起作用

2024-04-29

我正在尝试创建一个布局，其中第一列和最后一列div是粘性的。当我滚动一定数量时，最左边的列超出了左侧限制。为什么会发生这种情况以及如何解决它？

当您滚动到最右侧时，您可以看到红色列跳出框。

示例代码笔：https://codepen.io/vighnesh-google/pen/WNzjvqN https://codepen.io/vighnesh-google/pen/WNzjvqN

示例代码：

.slider {
  width: 100%;
  position: relative;
  overflow: auto;
}

.header,
.body {
 display: flex;
}

.item {
  width: 20%;
  height: 100px;
  background: yellow;
  border: 1px solid black;
  
  flex-grow: 0;
  flex-shrink: 0;
}

.sticky-item-left {
  position: sticky;
  left: 0;  
  background: red;
}

.sticky-item-right {
  position: sticky;
  right: 0;
  background: green;
}
<div class="slider">
  <div class="header">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
  <div class="body">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
</div>

解决这个问题的一种方法是：

.slider {
  overflow: auto;
  display: grid; /* main element as grid */
  grid-auto-columns: 20%;  /* width of the items */
}
.header,
.body {
   display: contents; /* remove the parent boundary to make sticky works */
}
.header > * {
  grid-row: 1; /* all header elements in first row */
}
.body > * {
  grid-row: 2; /* all body elements in second row */
}
.item {
  height: 100px;
  background: yellow;
  border: 1px solid black;
}

.sticky-item-left {
  position: sticky;
  left: 0;  
  background: red;
}

.sticky-item-right {
  position: sticky;
  right: 0;
  background: green;
}
<div class="slider">
  <div class="header">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
  <div class="body">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
</div>

要了解初始代码的问题，请向父元素添加边框以查看粘性元素的限制：

.slider {
  width: 100%;
  position: relative;
  overflow: auto;
}

.header,
.body {
 display: flex;
 border:4px solid blue;
}

.item {
  width: 20%;
  height: 100px;
  background: yellow;
  border: 1px solid black;
  
  flex-grow: 0;
  flex-shrink: 0;
}

.sticky-item-left {
  position: sticky;
  left: 0;  
  background: red;
}

.sticky-item-right {
  position: sticky;
  right: 0;
  background: green;
}
<div class="slider">
  <div class="header">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
  <div class="body">
    <div class="item sticky-item-left"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item sticky-item-right"></div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

sticky

位置：滚动一定量后粘性不起作用 的相关文章

  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch

  • 为什么开发者讨厌 iframe？ [复制]

    这个问题在这里已经有答案了 可能的重复 iframe 被认为是 不好的做法 吗 https stackoverflow com questions 362730 are iframes considered bad practice 在与

  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像

  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc

  • 如何在 select2 下拉列表中换行？

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l

  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b

  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m

  • socket.io 的良好初学者教程？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你

  • 使用 css 简单地将对象居中，无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以

  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前

  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu

  • Angular - CSS - 自定义类型=文件输入，如何使用按钮而不是标签？

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了

  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j

  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定

  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png

  • 网站的主体和元素固定在 980px 宽度上，不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width

  • 在 HTML5 画布中，如何用我选择的背景遮盖图像？

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect

  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区

  • 如何创建适合屏幕宽度的等宽/高框？ [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理

随机推荐

  • NodeJS 最佳实践：流量控制错误？

    在 Node js 中 我应该使用错误来进行流程控制 还是应该更像异常一样使用它们 我正在 Sails js 中编写一个身份验证控制器和一些单元测试 目前 我的注册方法检查是否存在具有相同用户名的用户 如果用户已存在并具有该用户名 我的模型

  • Ionic 3 Uncaught（承诺）：[object Object]

    我是 Ionic 3 和移动开发的新手 我正在尝试将 MySQL DB 连接到我的 Ionic 应用程序和 PHP Restful API 我用 Postman 测试了 API 它工作得很好 为了在 Ionic 中实现它 我做了以下操作 我

  • 具有 BLoC 模式的 BottomNavigationBar

    我真的很喜欢 BLoC 模式 并且正在尝试理解它 但我似乎无法弄清楚它应该如何应用BottomNavigationBar 制作导航页面列表并在导航栏点击事件上设置当前索引会导致整个应用程序重绘 因为setState 我可以使用Navigat

  • Java 8 列表到带有总和的 EnumMap

    我有以下课程 public class Mark private Long id private Student student private Integer value 0 private Subject subject public

  • 如何在 swagger 规范中表示十进制浮点数？

    我想在我的 api 文档中用 2 位小数表示小数点 用 1 位小数表示 我正在使用 swagger 2 0 规范中是否有内置定义的类型或任何其他 圆形 参数 或者我唯一的选择是使用 x 扩展 OpenAPI fka Swagger 规范使用

  • Magento - 分页生成错误的 URL

    除了网址之外 我的分页工作正常 第 2 页的链接是 example com products 21p 2 什么时候应该是 example com products p 2 当我在地址栏中输入后者时 它工作正常 这是生成链接的代码 li a

  • 使用 jQuery 中止 Ajax 请求

    是否有可能使用 jQuery 我取消 中止 Ajax 请求我还没有收到回复 大多数 jQuery Ajax 方法都会返回 XMLHttpRequest 或等效的 对象 因此您可以使用abort 请参阅文档 中止方法 http msdn mi

  • 适用于 Windows 的 C++11 编译器

    我刚刚在 Channel9 上看了一些视频 我发现 lambda 之类的东西真的很酷 当我尝试复制该示例时 它失败了 auto也没用 我正在使用诺基亚的 qtcreator 它随 gcc 4 4 0 一起提供 我想知道哪个编译器实现了有趣的

  • 尝试在类中定义静态常量变量

    我正在定义一个变量adc cmd 9 as a static const unsigned char在我的课堂上ADC私人之下 由于它是一个常量 我想我只需在它自己的类中定义它 但这显然不起作用 pragma once class ADC

  • 使用 for_each 调用成员函数

    这是我原来的代码 include stdafx h include

  • 在 AS3 中将 Little-endian ByteArray 转换为 Big-endian

    AS3中如何将Little endian ByteArray转换为Big endian 我将 bitmapData 转换为 Big endian ByteArray 然后使用 Adob e Alchemy 将其推入内存 然后当我从内存中读取

  • IEnumerable / IQueryable 上的动态 LINQ OrderBy

    我在中找到了一个例子VS2008示例 http msdn2 microsoft com en us bb330936 aspx用于动态 LINQ 允许您使用类似 SQL 的字符串 例如OrderBy Name Age DESC 用于订购 不

  • “sites-enabled”和“sites-available”目录之间有什么区别？ [关闭]

    Closed 这个问题是与编程或软件开发无关 help closed questions 目前不接受答案 Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话 但却具有历史意义 目前不接受新的

  • PHP/Apache 中的输出缓冲块如何工作？

    假设我将随机数据从 PHP 回显到浏览器 随机数据总量约为 XGb 回显以 YKb 块的形式完成 不使用 ob start PHP 和 Apache 缓冲区已满后 echo 调用是否会阻塞 客户端无法以与生成数据相同的速度使用数据 如果是

  • ui.router 和 ui.state 之间的 angularJS 有什么区别？

    我正在努力使用多个视图来设置 angularJS SPA角度 ui 路由器 https github com angular ui ui router 当我浏览网络上的教程和操作方法时 我看到了各种各样的依赖项 ui router gith

  • 如何将向量标准化/非标准化到范围 [-1;1]

    我怎么能够正常化到范围的向量 1 1 我想使用函数norm 因为它会更快 也让我知道我该怎么做非规范化之后的向量正常化 norm对向量进行归一化 使其平方和为 1 如果要对向量进行归一化 使其所有元素都在 0 和 1 之间 则需要使用最小值

  • 使用新数据快速更新 UITableView

    我正在尝试重新填充我的UITableView来自另一个 JSON 调用的数据 然而 我当前的设置似乎不起作用 虽然有很多相同的问题 但我可以找到我已经尝试过的答案 我将 API 数据保存在CoreData实体对象 我用我的 UITableV

  • 在 Mac 上设置 Laravel php artisan 迁移错误：没有这样的文件或目录 [重复]

    这个问题在这里已经有答案了 将一个完美运行的 laravel 项目从 git 拉到运行 MAMP 的 mac 上 项目在linux机器上完美运行 作曲家安装 php artisan migrate 出现以下错误 PDOException S

  • 使用音频单元录制我的 iPhone 应用程序播放的声音

    我今天有很多有趣的事情iOS 和音频单元并发现了很多有用的资源 包括在内 首先 我对某些事情感到困惑 是否真的有必要创建一个音频图 with 混合器单元录制应用程序播放的声音 或者播放声音就足够了ObjectAL https github

  • 位置：滚动一定量后粘性不起作用

    我正在尝试创建一个布局 其中第一列和最后一列div是粘性的 当我滚动一定数量时 最左边的列超出了左侧限制 为什么会发生这种情况以及如何解决它 当您滚动到最右侧时 您可以看到红色列跳出框 示例代码笔 https codepen io vigh

热门标签