限制在两点之间移动x轴滚动条

Question

我创建了一个图像轮播，它在那里显示图像，并通过x轴滚动条显示其他图像。它工作正常，但我想限制滚动条只在视区内移动。我试过If clause，但它有一个bug，而且不够好！我尝试创建一个类似于carousel的Amazon，但在我的例子中，我遇到了一个问题。我将所有HTML CSS和JS上传到JSfiddle：

​

​

提前谢谢你。

Answer 1

我用left和right边距修改了mouse-move事件的if条件。我添加此答案只是为了帮助您当前的实现。

但你不需要重新发明轮子。

有一些库利用本机滚动条来实现这种自定义UI。

一个例子是

https://github.com/buzinas/simple-scrollbar

这只是一个，你可以找到更多。因为这些库有多个填充，在较旧的浏览器上添加了更多支持，并使其具有更好的性能。

​

var div = document.getElementById('movesection');
var isDown = false;
var x1 = 0;
var rightPoint = 0;
var scrollBar = document.querySelector(".feed-scrollbar");
var scrollBarthumb = document.querySelector(".feed-scrollbar-thumb");

div.addEventListener('mousedown', function(e) {
  isDown = true;
  rightPoint = document.getElementById('carousel-viewport').offsetWidth - (div.offsetLeft + div.offsetWidth);
  x1 = e.clientX;
}, true);

document.addEventListener('mouseup', function() {
  isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
  event.preventDefault();

  var currentPosition = (x1 - event.clientX) + rightPoint;
  var leftMargin = scrollBar.offsetWidth - scrollBarthumb.offsetWidth;
  var rightMargin = 0;

  if (isDown && currentPosition >= rightMargin && currentPosition <= leftMargin) {
    div.style.right = currentPosition + 'px';
  }
}, true);

.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #ebebeb;
}

.carousel .carousel-viewport {
  width: 100%;
  min-height: 80px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  margin: 0;
}

.carousel .carousel-viewport .carousel-ul {
  display: inline-block;
  position: relative;
  right: 0;
  margin: 0 0 14px;
  padding: 0;
}

.carousel .carousel-viewport .carousel-ul .carousel-card {
  display: inline-block;
  text-align: center;
  min-width: 145px;
  max-width: 270px;
  min-height: 200px;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  word-wrap: break-word;
}

.carousel .carousel-viewport .carousel-ul .carousel-card:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  min-height: inherit;
}

.carousel .carousel-viewport .carousel-ul .carousel-card img {
  width: auto;
  height: auto;
  max-width: 270px;
  max-height: 200px;
  vertical-align: middle;
}

.carousel .carousel-viewport .feed-carousel-control {
  position: absolute;
  top: 55px;
  background-color: #fff;
  height: 100px;
  line-height: 100px;
  width: 45px;
  text-align: center;
  box-shadow: 0 1px 3px #888;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  display: block;
}

.carousel .carousel-viewport .feed-right {
  right: 0;
  border-radius: 3px 0 0 3px;
  clip: rect(-10px, 45px, 110px, -10px);
  padding-left: 5px;
}

.carousel .carousel-viewport .feed-left {
  left: 0;
  border-radius: 0 3px 3px 0;
  clip: rect(-10px, 55px, 110px, 0);
  padding-right: 5px;
}

.carousel .carousel-viewport .feed-arrow {
  display: inline-block;
  line-height: normal;
  vertical-align: top;
  position: relative;
  top: 50%;
  height: 22px;
  width: 13px;
  margin-top: -11px;
}

.carousel .carousel-viewport .feed-scrollbar {
  display: block;
  position: absolute;
  height: 6px;
  bottom: 0;
  left: 0;
  width: 100%;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-size: 0;
}

.carousel .carousel-viewport .feed-scrollbar .feed-scrollbar-track {
  display: block;
  background-color: #eee;
  height: 1px;
  border-radius: 4px;
  width: 100%;
  position: relative;
  top: 2px;
  margin: 0;
}

.carousel .carousel-viewport .feed-scrollbar .feed-scrollbar-track .feed-scrollbar-thumb {
  display: block;
  background-color: #aaa;
  height: 6px;
  border-radius: 6px;
  width: 0;
  position: absolute;
  top: -2px;
  margin: 0;
  cursor: pointer;
}

<div class="carousel">
  <div class="carousel-viewport" id="carousel-viewport">
    <span class="feed-scrollbar">
                <span class="feed-scrollbar-track">
                  <span class="feed-scrollbar-thumb" id="movesection" style="width: 200px;right:0;display: block;"></span>
    </span>
    </span>
  </div>
</div>

​