So legen Sie die Höhe der Bildlaufleiste in Javascript fest

So legen Sie die Höhe der Bildlaufleiste in JavaScript fest: Ermitteln Sie zuerst die Höhe des Knotens vor dem aktuell ausgewählten li. Subtrahieren Sie dann die Hälfte der Höhe von ul, setzen Sie sie auf den scrollTop von ul und legen Sie den Bildlauf fest Balken in Mittelstellung.

Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

JavaScript legt die Höhe der Bildlaufleiste dynamisch fest

Die bei der Arbeit angetroffene Situation ist wie folgt: ein ul-Tag, das viele li-Tags enthält, von denen eines die Initialisierung des ausgewählten

Wenn für ul eine Höhe festgelegt ist, wie z. B. im ul-Stil unten, und viele li-Untertags vorhanden sind, wird das ausgewählte li unter der Bildlaufleiste angezeigt.

<ul id="ul_module" style="height:180px; overflow-y:scroll;">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>000</li>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
    <li>888</li>
    <li class="li-on">999</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

Was Sie tun müssen, ist, das ausgewählte li-Tag in den sichtbaren Bereich zu verschieben und die Höhe der Bildlaufleiste über js dynamisch festzulegen.

Die Details sind wie folgt: Ermitteln Sie die Höhe des Knotens vor dem aktuell ausgewählten li, subtrahieren Sie dann die Hälfte der Höhe von ul und setzen Sie sie auf den scrollTop von ul. Grundsätzlich können Sie die Bildlaufleiste in der Mitte festlegen Position.

var ul_module = $('#ul_module');
var ul_height = ul_module.height();
var seleted_li = ul_module.find('.li-on');
if(seleted_li.length) {
    var height = seleted_li.height();
    var prevCount = seleted_li.prevAll().length;
    ul_module.scrollTop(height * prevCount - ul_height/2);
}

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】

Das obige ist der detaillierte Inhalt vonSo legen Sie die Höhe der Bildlaufleiste in Javascript fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!