Question

我使用-webkit-mask-image: -webkit-gradient创建了文字渐变渐变效果。

考虑一下：http://codepen.io/apopa116/pen/xOpjEz

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

Answer 1

我要做的是添加一些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", "");
        }
    })
});

Codepen Demo

标准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')
  }
})

CSS文本淡入渐变效果

1 个答案: