html - 滚动顶部的粘性渐变不起作用
问题描述
我正在使用 Ionic 开发一个应用程序,并且我有一些带有透明渐变 div 的滚动内容,它占据了该滚动内容的一半。
我可以滚动顶部没有此 div 的文本,但不能滚动可滚动内容的下半部分。
.terms-scroll {
margin-top: 32px;
height: 400px;
overflow-y: scroll!important;
overflow-x: hidden!important;
padding-right: 42px;
background-attachment: scroll;
}
.white-gradient {
background-attachment: scroll;
background: linear-gradient(to bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 100%);
width: 100%;
height: 50%;
position:fixed;
right:0;
margin-right: 50px!important;
bottom:0;
margin:0;
padding:0;
z-index: 10;
}
<div class="terms-scroll">
<p class="branding text-secondary">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<div class="white-gradient"></div>
</div>
这是一个例子
https://jsfiddle.net/pqLbvar1/1/
谢谢你的帮助!
解决方案
添加pointer-events: none;
到,.white-gradient
以便您可以滚动浏览 div。
.terms-scroll {
margin-top: 32px;
height: 400px;
overflow-y: scroll!important;
overflow-x: hidden!important;
padding-right: 42px;
background-attachment: scroll;
}
.white-gradient {
background-attachment: scroll;
background: linear-gradient(to bottom, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 100%);
width: 100%;
height: 50%;
position:fixed;
right:0;
margin-right: 50px!important;
bottom:0;
margin:0;
padding:0;
z-index: 10;
pointer-events: none;
}
<div class="terms-scroll">
<p class="branding text-secondary">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?""Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<div class="white-gradient"></div>
</div>
JSFiddle:https ://jsfiddle.net/pqLbvar1/6/
推荐阅读
- websocket - 如何通过 websockets 连接到 RSK 公共节点?
- python-3.x - Discord py mute 命令指定原因没有时间
- python - 使用 Tweepy 在一次通话中获取不同主题标签的推文
- sql - 使用过滤器更改参数值
- php - 如何在 Wordpress 中使用简码显示子字段(图像)?
- node.js - 加密存储在我的数据库中的数据
- java - 在 GridBagLayout 单元格内收缩 JLabel
- rabbitmq - NestJS中的RabbitMQ,生产者和消费者都出错
- puppet - {puppetserver ca list --all} 默认主机名和输出格式
- scala - 对象 hbase 不是包 org.apache.hadoop 的成员