程序员经验分享-hwhale

防止渐变叠加滚动

2023-12-19

我试图在滚动 div 的底部放置一个小渐变。我的解决方案基于已接受的答案这个所以线程 https://stackoverflow.com/questions/9204450/how-to-apply-a-fade-away-effect-not-animation-across-all-the-content-of-a-div。渐变显示得很好，但是当我滚动 div 中的内容时，渐变的底部会移动。我需要它保持在原位，以便内容独立于渐变滚动。我尝试了几种组合position: fixed, position: relative, and position: relatve无济于事。我错过了什么？

相关标记：

<div class="resultListContainer">
    <ul class="result">
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
    </ul>
    <!-- Lots more of the ul. -->
</div>

相关CSS：

.resultListContainer {
    border: 1px solid #000;
    height: 400px;
    width: 40em;
    overflow-y: scroll;
    font-size: 1em;
    position: relative;
}

.resultListContainer::before {
    background-image: linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 95%, rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}

.result {
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    list-style-type: none;
}

结果：


因为你的元素被定位了absolute，它的位置相对于父元素是绝对的，因此当您滚动时它会滚动with你的内容。你想要的就是你的ul滚动。我很快就重写了你的版本，但下面我有一个简化和清理的版本：

.resultListContainer {
    border: 1px solid #000;
    height: 400px;
    width: 40em;
    font-size: 1em;
    position: relative;
}

.resultListContainer::before {
    background-image: linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
    background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 95%, rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
  z-index: 2;
  pointer-events: none;
}

.result {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  box-sizing: border-box;
  z-index: 1;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    list-style-type: none;
    overflow-y: scroll;
}

.result li {
  height: 100px;
  background: red;
}
<div class="resultListContainer">
    <ul class="result">
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
        <li><span class="resultPermitNumber resultElement">B123456789</span></li>
        <li><span class="resultPermitType resultElement">FINAL</span></li>
        <li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
    </ul>
    <!-- Lots more of the ul. -->
</div>

基本上有两件事很重要：你的外箱cannot可以滚动，你的内框也可以。所有固定元件都需要outside你的内盒（这是你的ul在这种情况下）。其次，你的:before不可能是100%高，因为它会吸收鼠标事件，防止滚动。对于除 IE 之外的所有浏览器，您可以使用以下方法解决此问题pointer-events: none，但除此之外，最安全的方法是使渐变高度固定，并且:before元素你想要的渐变的高度，结果是（在本例中）20px底部不会接受鼠标事件的区域。

html, body { height: 100%; } body { padding: 0; margin: 0; }
div {
  width: 400px;
  height: 400px;
  max-height: 100%;
  position: relative;
}

div:before, div ul {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

div:before {
  background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
  background-size: 100% 100%;
  height: 20px;
  z-index: 2;
  /* IE does not support pointer events, so making this small in height is important
  as your scroll events will not be passed to the ul if it is covered by your :before */
  pointer-events: none;
  content: '';
  display: block;
}

div ul {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: scroll;
  z-index: 1;
}

div li {
  width: 100%;
  height: 100px;
  background: #ececec;
}

div li:nth-child(2n){
  background: #cecece;
}
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssposition

cssgradients

防止渐变叠加滚动 的相关文章

  • 使用 HTML 内容对 TextView 进行额外填充

    我有这个TextView

  • 行高如何使文本垂直居中？

    我试图理解为什么line heightCSS 属性将文本垂直放置在此按钮的中间 btn order width 220px height 58px font size 24px padding 0 text align center ver

  • 如何让浮动的div对齐到顶部？

    下面的代码可以在这个小提琴中查看 http jsfiddle net VgG55 10 http jsfiddle net VgG55 10 我有以下标记 其中 div 按以下顺序放置 div class wrapper div class

  • IE jquery click 仅适用于 li 中的文本，不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style

  • 当通过 javascript 填充输入框时，使物化标签移出输入框

    通常情况下 与物化 http materializecss com 文本输入框的标签显示在输入框中 直到用户选择该框并在其中输入文本 但是 当通过 javascript 填充框的值时 标签不会移开 它保留在框中并与输入的文本重叠 有没有办法

  • 浏览器特定的 CSS 属性

    在哪里可以找到完整的 浏览器特定 css 属性 参考 我的意思是一些属性 例如 moz border radius这仅适用于 Firefox 或 webkit min device pixel ratio 这些示例仅适用于指定的 Web 浏

  • 在这个页面中，悬停不起作用，我不知道为什么，而且页脚也没有占用 100% 宽度，即使我已经给了它

    我的编码是否不正确 或者悬停和页脚有什么问题 我需要知道 php 邮件程序是正确的还是我有错误 我无法找到错误 因为邮件功能在本地服务器上不起作用

  • 按下了哪个提交按钮？

    在这个jsfiddle中 http jsfiddle net littlesandra88 eGRRb http jsfiddle net littlesandra88 eGRRb 我是否提交了自动生成的按钮 每个表行都有一个唯一的 ID

  • SVG 坐标与变换矩阵

    我想在矩形元素上实现像 svg edit 这样的功能 旋转矩形 调整大小 Drag 旋转 SVG 矩形效果很好 但是当我想调整矩形大小时 它就会出现问题 坐标不正确 我使用变换矩阵来旋转targetelement setAttribute

  • 100% 宽度减去边距和填充[重复]

    这个问题在这里已经有答案了 我一直在四处寻找 但找不到适用于我自己的问题的解决方案 我正在开发一个移动网站 需要输入框为屏幕的 100 宽度 但我有padding left 16px and margin 5px这使得盒子超出了屏幕 所以我

  • 如何使用表单上的提交按钮传递参数

    我想创建一个可以更改 PHP 制作的 mySQL 中的产品数据的程序 我有自动递增并指定每个产品的键列 当我单击编辑产品链接时 它将传递我从每个产品获得的键值 并链接到 editPage php Key data Key a href ed

  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗

  • 具有固定高度、自动宽度并保持比例的图像

    我有一个反应灵敏的ul列表 其中每个li是 50 ul宽度 每一个li 我有一个图像 我想要固定的高度和 100 的宽度 保持图像的比例 例如通过缩放 请问我该怎么做 ul width 100 li width 50 float left

  • 如何使用 CSS 将 div 置于表格中心？

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM

  • Django 1.6 的静态文件

    我花了一整天但没有任何作用 我在这里看到了至少 20 篇关于同一主题的帖子 它们各不相同 有不同的建议 但没有一个对我有用 使用 Python 2 7 运行 Django 1 6 我正在尝试从 django 教程加载民意调查应用程序的 cs

  • 禁用任何类型的浏览器窗口滚动？

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间

  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm

  • CSS：在 hsla 中使用 hsl 变量？

    假设我有一个 CSS 变量hsl定义如下 white 1 hsl 0deg 0 100 现在 我想使用相同的白色 但不透明度为 50 所以 像这样 white 2 hsla 0deg 0 100 50 有没有办法使用第一个变量 white

  • Chrome Prerender 功能每次都会被取消

    我正在尝试 Chrome 中的预渲染功能 但是当我检查网络时 我可以看到任何链接的请求都被取消 我使用以下语法 我尝试了现场演示http prerender test appspot com http prerender test apps

  • 在CSS中，有什么比使其成为块元素更好的强制元素换行的方法呢？

    我有一个 H3 标题 我想将其样式设置为具有特定的背景颜色 但不让元素的背景占据父元素的整个宽度 鉴于 H3 默认情况下是块元素 我的样式需要将该元素更改为内联块元素 或者只是内联内联元素 如下所示 h3 background color

随机推荐

  • WPF DataGrid如何根据绑定数据将ColumnType设置为不同类型？

    我有 首选项 数据结构 其中有字符串 值 字段和 类型 字段的枚举 类型可以是 0 布尔值 1 整数 2 字符串 根据此类型字段中的值 我想以不同方式显示 值 单元格 例如复选框 文本框 下拉列表等 因此 为了清楚起见 同一列应根据该行中的

  • 如何使用js向td添加按钮？

    我有一个动态生成的表 因为它正在生成 TD 我想将第一个 TD 设置为按钮 下面是我的代码 显然不起作用 我记得我遇到的另一个问题是我们可以使用 html 更改 div 的内容 但这在这里也不起作用 Code var table docum

  • Django modeltranslation - 无法获取和查看原始字段

    我正在尝试使用django modeltranslation在我的项目中 目前 只是为了Tag具有一个字段的模型 name 我已经创建并注册了TranslationOptions then makemigrations and migrat

  • 如何使用 gradle 使用平台密钥签署 Android 应用程序？

    我看到了几个类似的问题 例如 Android 构建平台源代码后 如何使用平台密钥签署任意APK https stackoverflow com questions 4247818 android after building platfor

  • Redis作为数据库

    我想使用Redis作为数据库 而不是缓存 根据我 有限 的理解 Redis 是一个内存数据存储 使用 Redis 有哪些风险 如何减轻这些风险 您可以通过多种不同方式将 Redis 用作权威存储 Turn on AOF 仅追加文件存储 请参

  • 使用 Amazon SES 的 Codeigniter SMTP 电子邮件

    我想昨天亚马逊宣布了对 SES 简单电子邮件服务 的 SMTP 支持 我尝试使用 Codeigniter 发送 SMTP 电子邮件 但没有成功 我有一个经过验证的发件人 一切看起来都很好 this gt load gt library em

  • 查找从开始日期到年底的每个星期五

    所以我又带着另一个令人困惑的日期时间问题回来了 在 C 中 我如何返回从开始日期 DateTime Now 到今年年底 例如 今天是 19 号星期五 它将返回 26 2 9 16 23 30 7 等 这有效吗 static IEnumera

  • 如何用 Dotrine 保存图像

    我想在我的文章实体中保留图像 Doctrine2 可以做到这一点吗 我该怎么做呢 此致 博多 使用带有 File 类型的 ODM 设置非常简单 对于 ORM 实体 我会考虑创建一个像这样的列 注意 使用此链接将 blob 类型添加到 Doc

  • 使用 multipart/form-data 和 JSON 进行 Curl 发布

    有没有办法使用curl来做multipart form data发布并指定数据是application json 它不一定是卷曲的 这就是我使用的 效果很好 curl v H Content Type multipart form data

  • 使用纱线工作区在 npm 上创建可用的库...

    我正在寻找有关我编码的模式的反馈一边修修补补 Context 我正在为我的公司创建一个包 该包将公开发布 DX 开发人员体验 对我们来说是最重要的 为此我选择了开发中的最新趋势 Typescript esm 等 我想提出多个模块并使导入易于

  • 无向图中，最简单的环必须有3个节点？

    我正在尝试写一个关于循环和无向图的证明 但我对某些事情感到困惑 如果我的图只有 2 个顶点和一条连接它们的边 那不是循环 不是吗 因此 我需要至少 3 个顶点 其中 2 个顶点与其中一个节点之间有 2 个连接 另外两个顶点之间有一个连接 以

  • Java程序使用javascript读取html页面并保存其内容

    我想使用javascript提取html内容 从网站中提取用户的评论 在chrome中另存为 Inspect Element 我试试这个 Java 程序读取 html 页面并将其 HTML 代码保存在文本文件中 https stackove

  • 这是 C# 中将分隔字符串转换为 int 数组的最佳方法吗？

    给出以下字符串 string str 1 2 3 这是否是将其转换为最佳扩展int array static class StringExtensions public static int ToIntArray this string s

  • 使用python查找CSV文件每列的最小值

    我创建了一个程序 可以查找 CSV 文件每一行的最小值 现在我想对每一列执行相同的操作 但我无法这样做 任何建议将不胜感激 谢谢 Import and convert csv import csv data with open file r

  • Java HashMap 中的冲突解决

    Java HashMap uses put插入K V对的方法HashMap 可以说我用过put方法和现在HashMap

  • 在cloudfoundry上发布项目时出现错误java.io.FileNotFoundException（log4j日志文件）

    我计划将 Web 应用程序与 mysql 服务一起迁移到 Cloud Foundry 但我遇到了以下错误 它与当地环境配合良好 日志文件也会生成 下面是错误日志 Jan 5 2013 7 35 59 AM org cloudfoundry

  • X-Forwarded-Proto 和 Flask

    我有完全相同的问题描述这个问题和答案 https stackoverflow com questions 19840051 mutating request base url in flask 这个问题的答案是一个很好的解决方法 但我不明白

  • 用c++做一个定时器？

    我正在用 C 开发一个简单的游戏 一种追逐点风格的游戏 你必须单击显示屏上的一个绘制的圆圈 然后每次单击都会跳到另一个随机位置 但我想让游戏在 60 后结束几秒钟左右 将分数写入文本文件 然后在启动程序时从文本文件中读取信息并将信息存储到数

  • 使用默认分隔符与用户定义分隔符分割字符串

    我尝试了一个使用字符串分割的简单示例 但出现了一些意外的行为 这是示例代码 def split string source splitlist for delim in splitlist source source replace del

  • 防止渐变叠加滚动

    我试图在滚动 div 的底部放置一个小渐变 我的解决方案基于已接受的答案这个所以线程 https stackoverflow com questions 9204450 how to apply a fade away effect not

热门标签