javascript - 使用 Javascript + 输入类型=范围滚动 Div

Question

我目前正在开发一个项目，我必须根据输入类型=范围的移动滚动某个部分。这是代码-

$('input[type=range]').val('0');
$('input[type=range]').on('change input', function() {
	var max = 60;
	var value = $(this).val();
	var percent = value / max;
  var height = $('.tooltip').height();
  console.log("v",value);
var top = value + "%";
  console.log("t",top);
	$('.tooltip').css('top', top);
})

.tooltip {
  position: absolute;
  left: 0;
  background: silver;
  border-left: dotted 2px orange;
  padding: 2px;
  max-width: 200px;
  text-align: center;
}
input[type=range] {
  margin-top: 50px;
  width: 100%;
}
input[type=range]::-webkit-slider-thumb:after {
  content: '';
  width: 100px;
  background: transparent;
  color: #000;
  border-left: dotted 2px orange;
  pointer-events: none;
  padding: 50px;
  position: relative;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:250px;position:relative;border:2px solid;width:200px;overflow:hidden;">

<div class="tooltip">
  <p>How can I get this border to <em>consistently</em> align with the one on the thumb?</p>
</div>

</div>
<input type="range" min="0" max="100"/>

-here is the working 。但问题是，一旦我滚动到 100%，滚动的 div 就超出了外部 div。我希望滚动 div 停止在外部 div 的末尾，即使范围为 100%(滚动 div 不应穿过外部 div)。提前致谢。

Answer 1

1. 将 javascript 部分中的 max def 更改为 100，因为输入已定义 max="100"。
2. 使用高度差代替高度。

$('input[type=range]').val('0');
$('input[type=range]').on('change input', function() {
  var max = 100;
  var value = $(this).val();
  var percent = value / max;
  var parent_height = $('.tooltip').parent().height();
  var height = $('.tooltip').height();
  //console.log("p:" + parent_height + " s:" + height + " %:" + percent);
  var top = (parent_height - height) * percent;
  //console.log("t", top, "h", parent_height - height);  
  if(percent <= 1)
    $('.tooltip').css('top', top + "px");
})

.tooltip {
  position: absolute;
  left: 0;
  background: silver;
  border-left: dotted 2px orange;
  padding: 2px;
  max-width: 200px;
  text-align: center;
}
input[type=range] {
  margin-top: 50px;
  width: 100%;
}
input[type=range]::-webkit-slider-thumb:after {
  content: '';
  width: 100px;
  background: transparent;
  color: #000;
  border-left: dotted 2px orange;
  pointer-events: none;
  padding: 50px;
  position: relative;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:250px;position:relative;border:2px solid;width:200px;overflow:hidden;">

  <div class="tooltip">
    <p>How can I get this border to <em>consistently</em> align with the one on the thumb?</p>
  </div>

</div>
<input type="range" min="0" max="100" />