Question

我已经广泛搜索了解决方案，但没有运气。我有一个水平滚动条，可以在可滚动div的每一侧添加阴影，以指示是否有更多内容。我的问题是我在同一页面上有多个具有相同类名的div和表（我没有构建这个页面所以不能分配唯一的类名。我需要知道如何在我的代码中添加某种/ /循环函数因此该函数可以单独应用于每个元素。我已经使用我的代码设置fiddle以更好地解释我的意思，因为它很难解释，但我确定这一点将澄清我要问的内容。目前我有3个滚动div，但无论是滚动第一个，第二个还是第三个，阴影都只适用于第一个。任何帮助都将不胜感激。

我目前的代码如下：

＆＃13;

$(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
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

<强>问题/建议：

您的标记中有id个重复，id 必须唯一。将其用作类，而不是id。
您需要使用当前上下文中的元素来显示正在滚动的当前元素的正确阴影。为此，我使用了上下文选择器。例如：$(".shadowtop", this)，这将选择具有类shadowtop且位于this元素内的元素。
函数smoothTouchScroll由于您没有包含相应的插件文件而给出错误，因此出于演示目的我已将其删除。
要默认显示正确的阴影，请对CSS中的display: block;类使用.shadowbottom。

Demo

$(document).ready(function() {
  $('.data-holder').scroll(function() {
    var scrollValue = $(this).scrollLeft();

    if (scrollValue == 0) {
      $(".shadowtop", this).fadeOut(200);
    } else if (scrollValue == ($(this).get(0).scrollWidth - $(this).width())) {
      $(".shadowbottom", this).fadeOut(200);
    } else {
      $(".shadowtop", this).fadeIn(200);
      $(".shadowbottom", this).fadeIn(200);
    }
  });
});

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%;
  display: block;
}
.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.10.0/jquery.min.js"></script>
<div class="container">
  <div class="data-holder">
    <div class="shadowtop"></div>
    <div class="shadowbottom"></div>
    <div class="block">content 1</div>
  </div>
</div>
<div class="container">
  <div class="data-holder">
    <div class="shadowtop"></div>
    <div class="shadowbottom"></div>
    <div class="block">content 2</div>
  </div>
</div>
<div class="container">
  <div class="data-holder">
    <div class="shadowtop"></div>
    <div class="shadowbottom"></div>
    <div class="block">content 3</div>
  </div>
</div>

Answer 2

将您的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);
            }
        })
    })
});

请查看此小提琴代码：http://jsfiddle.net/usu4enev/3/

如何在滚动

2 个答案: