Comment définir la hauteur de la barre de défilement en javascript-js tutoriel-php.cn

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

藏色散人

Libérer： 2023-01-05 16:09:36

original

5492 Les gens l'ont consulté

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.

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

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

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>

Copier après la connexion

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 = $(&#39;#ul_module&#39;);
var ul_height = ul_module.height();
var seleted_li = ul_module.find(&#39;.li-on&#39;);
if(seleted_li.length) {
    var height = seleted_li.height();
    var prevCount = seleted_li.prevAll().length;
    ul_module.scrollTop(height * prevCount - ul_height/2);
}

Copier après la connexion

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