CSS文本渐变效果

我正在使用

-webkit mask image:-webkit gradient

创建文本渐变效果

考虑这一点：

---

通过仅使用CSS，当我到达div底部时，如何删除渐变遮罩？

我要做的是添加一些JQuery（首先必须添加一行以导入JQuery框架），该行检测窗口何时一直滚动到页面底部，如果是，则更改-webkit mask image属性：

通过添加此JS，您应该能够得到您想要的：

jQuery(function($) {
    $('.box').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
           $(".box").css("-webkit-mask-image", "initial");
        }else{
           $(".box").css("-webkit-mask-image", "");
        }
    })
});

标准JS解决方案等价物（无需JQuery导入）[信用证：Andrew Bone]

var boxSelector = document.querySelector('.box');

boxSelector.addEventListener("scroll", function() {
  if (boxSelector.scrollTop >= (boxSelector.scrollHeight - boxSelector.offsetHeight)) {
    boxSelector.classList.remove('gradient')
  } else {
    boxSelector.classList.add('gradient')
  }
})

---

当你说“当我到达div的底部时”，你是在说滚动吗？因为我不相信CSS对视图窗口在文档中的位置有任何概念，所以这可能是不可能的。（仅使用CSS，也就是说，使用JS是非常可行的）寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。虽然你已经提供了一个，但是如果链接无效，你的问题对其他将来有同样问题的用户来说没有任何价值。我个人会切换CSS类，而不是在JS中设置样式，但这主要是个人偏好。当它一直滚动到底部时，淡入效果停止，但是，当你再次向上滚动时，它就不会继续了，所以我的解决方案有点简化了。我不完全确定你为什么要导入jquery（减慢加载时间）来实现这一点？在标准JS中很容易做到，感谢标准JS选项。我用你的密码更新了我的答案，并相信了你。