Question

在我创建的自定义滑块中，手柄移动到容器之外。但我希望它保持在容器限制范围内。我们可以通过在CSS中将margin-left设置为offset来简单地完成。但我的要求是当手柄右端检测到容器的末端时，不应再允许手柄移动。任何帮助表示赞赏。感谢。

演示链接：https://jsfiddle.net/mohanravi/1pbzdyyd/30/

document.getElementsByClassName('contain')[0].addEventListener("mousedown", downHandle);

function downHandle() {
  document.addEventListener("mousemove", moveHandle);
  document.addEventListener("mouseup", upHandle);
}

function moveHandle(e) {
  var left = e.clientX - document.getElementsByClassName('contain')[0].getBoundingClientRect().left;
  var num = document.getElementsByClassName('contain')[0].offsetWidth / 100;
  var val = (left / num);

  if (val < 0) {
    val = 0;
  } else if (val > 100) {
    val = 100;
  }

  var pos = document.getElementsByClassName('contain')[0].getBoundingClientRect().width * (val / 100);

  document.getElementsByClassName('bar')[0].style.left = pos + 'px';
}

function upHandle() {
  document.removeEventListener("mousemove", moveHandle);
  document.removeEventListener("mouseup", upHandle);
}

.contain {
  height: 4px;
  width: 450px;
  background: grey;
  position: relative;
  top: 50px;
  left: 40px;
}

.bar {
  width: 90px;
  height: 12px;
  background: transparent;
	border: 1px solid red;
  position: absolute;
  top: calc(50% - 7px);
  left: 0px;
  cursor: ew-resize;
}

<div class='contain'>
  <div class='bar'></div>
</div>

Answer 1

你需要改变这个

document.getElementsByClassName('bar')[0].style.left = pos + 'px';

到这个

if(pos > 90){
  document.getElementsByClassName('bar')[0].style.left = pos - 90 + 'px';
  }
  else{
  document.getElementsByClassName('bar')[0].style.left = 0 + 'px';
  }

因为你的酒吧的宽度是90px我减去90.

请参阅this updated fiddle

滑块手柄需要限制在容器内，不应超出容器

1 个答案: