一旦最后一个li在屏幕上可见，就停止滚动

Question

我有一组图像在一个row和overflow:hidden中对齐。我有2个按钮， Left 和 Right ，点按后滚动div到他们的对面。我在这里面临的问题是，即使在屏幕上显示最后一个element之后，滚动仍然会在某种程度上停止，然后停止，为屏幕中的空白区域创建方面。我怎么能阻止这个？以下是 Fullscreen result 和 Fiddle 以及代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  //Video Slider begins
  var totalWidth = 0;

  $(".gallery__item").each(function() {
    totalWidth = totalWidth + $(this).outerWidth(true) + 100;
  });

  var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();

  function toGalleryItem($targetItem) {
    if ($targetItem.length) {
      var newPosition = $targetItem.position().left;
      if (newPosition <= maxScrollPosition - 100) {
        $targetItem.addClass("vid-item-active");
        $targetItem.siblings().removeClass("vid-item-active");
        $(".gallery").animate({
          left: -(newPosition)
        });
      } else {
        $(".gallery").animate({
          left: -(maxScrollPosition)
        });
      };
    };
  };
  $(".des-style").width("100%");
  $(".gallery").width(totalWidth);

  $(".vid-item:first").addClass("vid-item-active");

  // When the prev button is clicked
  // ====================================================================
  $(".gallery__controls-prev").on("click", function() {
    var $targetItem = $(".vid-item-active").prev();
    toGalleryItem($targetItem);
  });
  // When the next button is clicked
  // ====================================================================
  $(".gallery__controls-next").on("click", function() {
    var $targetItem = $(".vid-item-active").next();
    toGalleryItem($targetItem);
  });
});

＆＃13;

.gallery-wrap {
  margin: 0 auto;
  overflow: hidden;
}
.services-wrap {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  margin: 0 0 40px;
  margin-top: 15px !important;
  box-shadow: 5px 5px 5px gray;
  max-height: 220px !important;
  min-height: 220px !important;
}
.gallery {
  position: relative;
  left: 0px;
  top: 0px;
}
.gallery__item {
  float: left;
  list-style: outside none none;
  margin-right: 20px;
  width: 200px;
}
.stay-fixed {
  position: absolute;
  z-index: 20;
}
.gallery__controls-prev {
  cursor: pointer;
  float: left;
}
.gallery__controls-next {
  cursor: pointer;
  float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
  width: 28px;
  height: 28px;
}
.left {
  transform: rotate(-180deg);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="gallery-wrap">
  <div class="gallery clearfix">
    <ul>
      <li class="gallery__item vid-item vid-item-active">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
    </ul>
  </div>
  <div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
    <div class="gallery__controls-prev">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
    </div>
    <div class="gallery__controls-next">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请检查我是否添加了代码段。

Demo Link

$(document).ready(function() {
  //Video Slider begins
  var totalWidth = 0;
  var mainDivWidth = $(".gallery").outerWidth();
  $(".gallery__item").each(function() {
    debugger;
    totalWidth = totalWidth + $(this).outerWidth(true) + 12;
  });

  var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth();

  function toGalleryItem($targetItem) {
    if ($targetItem.length) {

      var newPosition = $targetItem.position().left;
      debugger;
      if (totalWidth < newPosition + mainDivWidth) {
        return false;
      }
      if (newPosition <= maxScrollPosition - 100) {
        $targetItem.addClass("vid-item-active");
        $targetItem.siblings().removeClass("vid-item-active");
        $(".gallery").animate({
          left: -(newPosition)
        });
      } else {
        $(".gallery").animate({
          left: -(maxScrollPosition)
        });
      };
    };
  };
  $(".des-style").width("100%");
  $(".gallery").width(totalWidth);
  //$(".gallery").css("left", "-40px");
  // Basic HTML manipulation
  // ====================================================================
  // Set the gallery width to the totalWidth. This allows all items to
  // be on one line.

  $(".vid-item:first").addClass("vid-item-active");

  // When the prev button is clicked
  // ====================================================================
  $(".gallery__controls-prev").on("click", function() {
    var $targetItem = $(".vid-item-active").prev();
    toGalleryItem($targetItem);
  });
  // When the next button is clicked
  // ====================================================================
  $(".gallery__controls-next").on("click", function() {
    var $targetItem = $(".vid-item-active").next();
    toGalleryItem($targetItem);
  });
});

.gallery-wrap {
  margin: 0 auto;
  overflow: hidden;
}
.services-wrap {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  margin: 0 0 40px;
  margin-top: 15px !important;
  box-shadow: 5px 5px 5px gray;
  max-height: 220px !important;
  min-height: 220px !important;
}
.gallery {
  position: relative;
  left: 0px;
  top: 0px;
}
.gallery__item {
  float: left;
  list-style: outside none none;
  margin-right: 20px;
  width: 200px;
}
.stay-fixed {
  position: absolute;
  z-index: 20;
}
.gallery__controls-prev {
  cursor: pointer;
  float: left;
}
.gallery__controls-next {
  cursor: pointer;
  float: right;
}
.gallery__controls-prev img,
.gallery__controls-next img {
  width: 28px;
  height: 28px;
}
.left {
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-wrap">
  <div class="gallery clearfix">
    <ul>
      <li class="gallery__item vid-item vid-item-active">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple.">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program ">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
      <li class="gallery__item vid-item">
        <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
          <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple">
            <div class="pull-left">
              <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png">
            </div>
            <div class="clearfix"></div>
            <div class="des-style" style="width: 100%;">
              <div class="body-content">
                Description
              </div>
            </div>
          </a>
        </div>
      </li>
    </ul>

  </div>
  <div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12">
    <div class="gallery__controls-prev">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left">
    </div>
    <div class="gallery__controls-next">
      <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png">
    </div>
  </div>
</div>