使用Javascript +輸入類型=范圍滾動Div

Question

我目前正在一個項目中，我必須根據輸入type = range的移動來滾動某個部分。 這是代碼-

 $('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"/> 

- 這是工作 。 但是問題是，一旦我滾動到100％，滾動div就會超出外部div。 我希望滾動div停在外部div的末尾，即使w范圍為100％（滾動diov不應越過外部div）。 提前致謝。

Answer 1

1. 將javascript部分的最大清晰度更改為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" /> 

Answer 2

您需要在設置div的左側之前添加條件。

var tooltipWidth = $('.tooltip').width();

if(left + tooltipWidth > width){
    left = width - tooltipWidth;
}

這是工作示例。