Comment définir la hauteur de la barre de défilement en javascript

Comment définir la hauteur de la barre de défilement en JavaScript : obtenez d'abord la hauteur du nœud devant le li actuellement sélectionné, puis soustrayez la moitié de la hauteur de ul et définissez-la sur le scrollTop de ul ; et placez la barre de défilement en position médiane.

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

JavaScript définit dynamiquement la hauteur de la barre de défilement

La situation rencontrée au travail est la suivante : une balise ul, qui contient de nombreuses balises li, dont une représente l'initialisation du 7375252888184eb74f3681dea2c7432b25edfb22a4f469ecb59f1190150159c6.

Si ul a une hauteur définie, comme le style ul ci-dessous, et qu'il existe de nombreuses sous-balises li, le li sélectionné sera submergé sous la barre de défilement.

<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>

Ce que vous devez faire est de déplacer la balise li sélectionnée dans la zone visible, et vous pouvez définir dynamiquement la hauteur de la barre de défilement via js.

Les détails sont les suivants : obtenez la hauteur du nœud devant le li actuellement sélectionné, puis soustrayez la moitié de la hauteur de ul et réglez-la sur scrollTop de ul. Fondamentalement, vous pouvez définir le défilement. barre en position médiane.

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);
}

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!