Question

我有一个水平的图像列表，只能在x方向上滚动。在右侧的末尾，有一个css渐变，表明有更多的内容。（滚动条将被移除，可能不是很明显，这是可滚动的内容）

我已将光标更改为列表项上的指针，以显示如果单击它们将导致不同的页面。渐变后面的右侧被光标更改阻止，z-index不会解决问题。

非常感谢任何帮助！

.gradient{
    /*background: -moz-linear-gradient(left center, transparent, white);*/
          /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );

example here

Answer 1

您可以在渐变div上设置css属性pointer-events: none。这应该解决它。

Answer 2

我认为最简单的解决方案可能是joeltine建议将渐变事件添加到渐变中，然后确定图像是否位于渐变点击点之下并触发该事件。

另一个解决方案是：

在每个列表元素中放置一个绝对定位的渐变（在图像上方）
给列表元素overflow：hidden（所以渐变被剪切在li里面）
然后基于滚动位置，根据列表元素的位置更新列表元素内的所有渐变位置。

这种方法的缺点是渐变位置将使用js而不是css更新，这意味着它可能会在滚动时暂时停止，并且由于每个图像都有自己的图像，因此有大量图像可能会影响性能梯度。

只需从html中删除渐变div，然后将li css更改为：

li {
  display:inline-block;
  cursor: pointer;
  overflow: hidden;
  position:relative;
}

并添加以下脚本：

function setupGradient($ul) {
  var gradientWidth = 250;

  $ul.find("li").each(function(){
    $("<div/>").addClass("gradient")
               .css("width", gradientWidth)
               .appendTo($(this));
  });

  var setGradient = function(){
    $ul.find("li").each(function() {
      $(this).find("div")
         .css("left", $ul.width() - $(this).position().left - gradientWidth);
    });
  };

  $ul.bind("scroll", setGradient);
  setGradient();
}

setupGradient($("ul"));

这是一个工作演示（仅在Chrome中测试过）：

http://jsfiddle.net/yFG5W/

如何在可点击内容上使用渐变css？

2 个答案: