程序员经验分享-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

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

  • 绝对定位的表头 (th) - 哪个浏览器是错误的？

    这个带有一个绝对定位列的简单表格在 Firefox 和 IE 中的呈现方式与在 Chrome 和其他基于 Webkit 的浏览器 中的呈现方式不同 http jsfiddle net WZ6x8 http jsfiddle net WZ6x

  • 理解

    我正在尝试在网站中使用所选的图像 假设我有一个简单的网站 用户可以使用以下命令从系统中选择图像

  • 使用 JavaScript 进行 HTML 到 MS Word 的页眉和页脚转换

    Am rendering my whole HTML page into MS word Here I tried by referring this link below https phppot com javascript how t

  • $(this) 在 jQuery 中如何工作

    jQuery 标签是如何实现的 this 到底工作吗 我知道如何使用它 但是 jQuery 如何知道哪个元素是 活动的 用于获取当前项目的原始 Javascript 标签是什么 还是只是 jQuery The this是一个简单的 java

  • 如何轻松地将 Ajax、perl 和 JSON 结合使用？

    我正在尝试使用 Ajax 制作一个网页 Example 我创建了一个 Perl CGU 文件来触发一个简单的帖子 文件 test cgi name 托马斯 回复短信 你的名字是托马斯 我创建了一个可以使用该帖子的 html 文件 但随后页面

  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备？

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g

  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div

  • 如何将 div （或任何元素）覆盖在表格行 (tr) 上？

    我想在恰好有多个列的表行 tr 标记 上覆盖一个 div 或任何可以使用的元素 我尝试了几种方法 似乎都不起作用 我在下面发布了我当前的代码 我确实得到了一个覆盖 但不是直接覆盖在该行上 我尝试将覆盖顶部设置为 div Bottom css

  • HTML代码可以像CSS文件一样附加到HTML页面吗？

    HTML 代码可以像 CSS 文件一样附加到 HTML 页面吗 这样 如果所有页面中都复制了部分 HTML 代码 我可以将其放在一个文件中 然后轻松修改它 谢谢 Ahmed 是的 可以 使用框架 但不推荐 Example 此代码将允许您重用

  • 从 PHP 生成渐变颜色

    我想知道如何构建一个给出颜色代码和 显示该颜色的渐变 例如 function generate color int colorindex Generate 10 pale colors of this color 请帮我 迈克尔引用的代码相

  • css 字体 twitter 像关闭按钮一样，我错过了什么？

    twitter 有一个关闭按钮 它是单个字符 x 我需要类似的东西 但是在我检查之后 span x span 我按照 firebug 告诉我的那样创建 css 规则 close button font family Tahoma Arial

  • 将引导程序中的表单居中不起作用[重复]

    这个问题在这里已经有答案了 我试图将我的表单置于 div 中 但我使用的方法不起作用 我尝试使用引导文档中所述的 justify content center 属性 但它没有将其居中 当我尝试将其居中但应用时display flex and

  • 使用 jQuery 检测容器溢出？

    我见过这个问题 https stackoverflow com questions 2059743 detect elements overflow using jquery但感觉必须有一个 更干净 的 jQuery 方法来做到这一点 我什

  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释

  • 模板中的 bson.ObjectId

    我有一个具有 bson ObjectId 类型的结构 例如如下所示 type Test struct Id bson ObjectId Name string Foo string 我想在 html 模板中呈现它 Name Food a h

  • 清理 html 字符串中的所有脚本

    HTML5 剪贴板很棒 但我正在寻找一种使其安全的方法 用户正在将文本 html 粘贴到我的网页中 这允许他们粘贴图像 表格等 我正在寻找一种方法 在将粘贴的内容添加到页面之前删除所有脚本 我需要删除


  • 有多少像素？ [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览

  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码

  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲

  • 使用 div 或表格来包含链接列更好吗？

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag

随机推荐

  • 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

热门标签