javascript - 如何在滚动时将 jQuery 阴影函数应用于具有相同类名的多个元素

Question

我已经广泛寻找解决方案，但没有成功。我有一个水平滚动条，它在可滚动 div 的每一侧添加一个阴影，以指示是否有更多内容。我的问题是，我在同一页面上有多个具有相同类名的 div 和表(我没有构建此页面，因此无法分配唯一的类名。我需要知道如何向我的代码添加某种each/loop 函数这样该函数分别适用于每个元素。我用我的代码设置了 fiddle 以更好地解释我的意思，因为它很难解释，但我确信这会澄清我的要求。目前我有 3 个滚动 div，但无论我滚动第一个、第二个还是第三个，阴影仅应用于第一个。任何帮助将不胜感激。

我目前的代码如下:

$(document).ready(function() {
  $('.data-holder').scroll(function() {
    var scrollValue = $(this).scrollLeft();

    if (scrollValue == 0) {
      $("#shadowtop").fadeOut(200);
    } else if (scrollValue == ($(this).get(0).scrollWidth - $(this).width())) {
      $("#shadowbottom").fadeOut(200);
    } else {
      $("#shadowtop").fadeIn(200);
      $("#shadowbottom").fadeIn(200);
    }
  });
  var scrollValue = $('.data-holder').scrollLeft();
  if (scrollValue < ($('.data-holder').get(0).scrollWidth - $('.data-holder').width())) {
    $("#shadowbottom").show();
  }
});

$(document).ready(function() {
  $(".data-holder").smoothTouchScroll({
    continuousScrolling: true
  });
});

body {
  background: none repeat scroll 0 0 #fff;
  font-family: "Open Sans";
  line-height: 26px;
  margin: 20px;
}
.container {
  overflow: hidden;
  position: relative;
  width: 500px;
  overflow: hidden;
}
.data-holder {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  width: 500px;
  height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}
#shadowtop,
#shadowbottom {
  position: absolute;
  width: 12px;
  height: 100%;
  z-index: 9999;
  display: none;
  background-size: 100% 0;
}
#shadowtop {
  left: 0;
  background: radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 0 100%;
}
#shadowbottom {
  right: 0;
  background: radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)) 0 100%;
}
.block {
  overflow-x: auto;
  background: beige;
  border-bottom: 1px solid #f4f4f4;
  float: left;
  padding: 10px;
  width: 800px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  <div class="data-holder">
    <div id="shadowtop"></div>
    <div id="shadowbottom"></div>
    <div class="block">content 1</div>
  </div>
</div>
<div class="container">
  <div class="data-holder">
    <div id="shadowtop"></div>
    <div id="shadowbottom"></div>
    <div class="block">content 2</div>
  </div>
</div>
<div class="container">
  <div class="data-holder">
    <div id="shadowtop"></div>
    <div id="shadowbottom"></div>
    <div class="block">content 3</div>
  </div>
</div>

Answer 1

按如下方式更改您的 JavaScript，它应该可以工作。

  $(document).ready(function() {

    $('.data-holder').each(function() {
        //hold the shadowTop and shadowBottom in a reference so that you don't make query every time
        var shadowTop = $(this).find("#shadowtop"),
            shadowBottom = $(this).find("#shadowbottom");
        var scrollValue = $(this).scrollLeft();

        //check initiall scroll value and show the shadows accordingly
        if (scrollValue < ($(this).get(0).scrollWidth - $(this).width())) {
            shadowBottom.show();
        }
        $(this).scroll(function() {
            var scrollValue = $(this).scrollLeft();
            var shadowTop = $(this).find("#shadowtop"),
                shadowBottom = $(this).find("#shadowbottom");
            if (scrollValue == 0) {
                shadowTop.fadeOut(200);
            } else if (scrollValue == ($(this).get(0).scrollWidth - $(this).width())) {
                shadowBottom.fadeOut(200);
            } else {
                shadowTop.fadeIn(200);
                shadowBottom.fadeIn(200);
            }
        })
    })
});

检查这个 fiddle 代码:http://jsfiddle.net/usu4enev/3/