Scrollen Sie einen Div mit Javascript + Eingabe Typ = Bereich

Question

Ich arbeite derzeit an einem Projekt, wo ich einen bestimmten Abschnitt auf der Grundlage der Bewegung von Eingangstyp = Bereich scrollen muss. Dies ist die Code-

$('input[type=range]').val('0'); 
 
$('input[type=range]').on('change input', function() { 
 
\t var max = 60; 
 
\t var value = $(this).val(); 
 
\t var percent = value/max; 
 
    var height = $('.tooltip').height(); 
 
    console.log("v",value); 
 
var top = value + "%"; 
 
    console.log("t",top); 
 
\t $('.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. Aber das Problem ist, sobald ich scrollen bis zu 100% der Scroll-Div geht über die äußere div. Ich möchte, dass das scrollende div am Ende des äußeren divs stoppt, auch wenn der Bereich auf 100% steht (das scrollende diov sollte das äußere div nicht überschreiten). Danke im Voraus.

Answer 1

1. Ändern Sie die maximale def in Javascript-Teil auf 100, weil die Eingabe max = "100" definiert hat.
2. Höhenunterschied statt Höhe verwenden.

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

Sie müssen vor der Einstellung der linken Seite der div Bedingung hinzufügen.

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

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

Here ist die Arbeitsprobe.