问题滚动div顶部的CSS褪色部分

我想在我的DIV顶部添加一个褪色部分，这样当用户滚动时，内容会逐渐淡出。我已经设置了一些实现此目的的CSS，但有一个问题..褪色部分滚动内容而不是保持固定。

我怎样才能解决这个问题？我是否需要jQuery的帮助，或者是否可以使用CSS，这适用于任何兼容CSS3的浏览器吗？（我知道我没有正确的供应商前缀 linear-gradient但是）

这是我到目前为止的代码和一个小提琴：

.fadedScroller {
  overflow: auto;
  position: relative;
  height: 100px;
}

.fadedScroller:after {
  content: '';
  top: 0;
  left: 0;
  height: 20px;
  right: 0;
  background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(251,251,251,0) 100%);
  position: absolute;
}

更新

我已经更新了我的小提琴指出使用 position: fixed 并没有实际工作，因为褪色部分然后出现在包含div而不是固定在顶部。

12964

2018-06-11 12:37

起源

我有一个类似的问题： stackoverflow.com/q/16396951/522479 - Cobra_Fast

到你的更新，到底是什么 display:fixed？ ;）我认为你的意思 position:fixed？！ - yckart

@yckart哦是的 - 错字，更新 - Chris

@克里斯 position:fixed 除了浏览器窗口之外，它不能相对于任何东西！ - yckart

你愿意使用JQuery吗？还是纯粹的CSS？ - pandavenger

答案:

创建第二个div以保持渐变并将其移动到内容div上。我知道这有点脏，写起来也不是很直观，但它确实有用。

HTML：

<div class="fadedScroller">
   ...
</div>
<div class="fadedScroller_fade"></div>

CSS：

.fadedScroller {
    overflow: auto;
    position: relative;
    height: 100px;
}

.fadedScroller_fade {
    content:'';
    margin-top: -100px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
    position: relative;
}

演示：

http://fiddle.jshell.net/hP3wu/12/

2018-06-11 12:58

现在你写了它，看起来很明显！谢谢 - Chris

+1这与我得出的结论基本相同： fiddle.jshell.net/hP3wu/15 - 一个缺点是您无法单击滚动条的顶部（包括向上箭头），因为叠加层的方式= / - xec

很好的解决方案@xec！ - Chris

另一个hackish解决方法可能是 fiddle.jshell.net/hP3wu/18 - 为滚动条腾出空间，并使用溢出：滚动以便始终显示。还不错，因为滚动条的宽度未知...... - xec

我使用JQuery编写了一个解决方案，但这可能是没有脚本的最佳解决方案。 - pandavenger

很简单，使用 position:fixed 代替 position:absolute：

.fadedScroller:after {
    content:'';
    position: fixed;
    top: 0;
    left: 0;
    height: 20px;
    right: 0;
    background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
}

https://jsfiddle.net/hP3wu/4/

UPDATE1

https://jsfiddle.net/hP3wu/7/

UPDATE2

https://jsfiddle.net/hP3wu/9/

2018-06-11 12:41

对于我来说，褪色效果极度削弱（几乎无法察觉）。（FF21 / Linux3.8.12） - Cobra_Fast

@Cobra_Fast那是因为 position:absolute 包含在 position:relative 所以它不在 top:0 你的窗户。所以，调整高度到例如 40px :) - yckart

给予它之后 position: fixed; 这个职位不再相对于 .fadedScroller - fiddle.jshell.net/hP3wu/6 - xec

仍然没有完全淡出。我希望它会逐渐变得不可见（因为渐变的顶部有一个alpha值 1）。 - Cobra_Fast

这个工作只要 .fadedScroller 在窗口的顶部，它不是。因为它发生在页面中间，所以这不起作用 - Chris

这是一个巨大解决方案，所以道歉，但这是我能想到的唯一方法： http://fiddle.jshell.net/hP3wu/17/

所以首先我做了另一个 div 同 class="after" 因为我无法选择 :after 使用JQuery的伪元素

然后我做了 div.after 每次滚动发生时重新定位自己 .fadedScrollbar div 同

$(".fadedScroller").scroll(function () {
    $(".fadedScroller .after").css("top", $(this).scrollTop());
});

2018-06-11 13:06

+1除了移动设备之外，这可能是最佳工作解决方案，因为它们不会在滚动停止之前触发滚动事件。 - xec

@xec谢谢，我编辑了它，随时添加你认为应该存在的任何内容。 - pandavenger

http://fiddle.jshell.net/ne1baj4e/1/ 这是我对yckart解决方案的修改，它可以在div滚动到顶部时减少淡入淡出。它只是添加了一点Javascript / JQuery：

const FADE_HEIGHT = 40;
let oldStyle = $(`<style>.fadedScroller:after {top: -${FADE_HEIGHT}px;}</style>`).appendTo("head");

$(".fadedScroller").scroll(() => {
  let offset = Math.min($(".fadedScroller").scrollTop() - FADE_HEIGHT, 0);

  oldStyle.remove();

  oldStyle = $(`<style>.fadedScroller:after {top: ${offset}px;}</style>`).appendTo("head");
});

div底部的淡入淡出是类似的，除非你需要计算偏移量

$(".fadedScroller")[0].scrollHeight - $(".fadedScroller")[0].clientHeight - $(".fadedScroller")[0].scrollTop

2017-09-16 22:05

问题 滚动div顶部的CSS褪色部分

答案:

热门问题

问题滚动div顶部的CSS褪色部分