javascript - Comment faire défiler un div local dans jq?

Question

<style>
.top , .bottom{hauteur:130px;background:#000;} .center{hauteur:400px;overflow:hidden;position:relative;}
.center .box{largeur:100%;hauteur :100%;position:absolute;}
.center .box ul{overflow:hidden;}
.center .box li{background:red;height:400px;width:100%;}
</style>

<p class="top"></p>

<p class="center">
    <p class="box">
        <ul>
        <li></li>
        <li></li>
        </ul>
    </p>
</p>

<p class="bottom"></p>

Comment jq fait-il un défilement partiel de ul li ? Aucune barre de défilement ne peut apparaître au milieu. Pensez également à bloquer les événements de la barre de défilement du navigateur.
La condition requise est la suivante : faites défiler avec la molette de la souris. li fera défiler vers le bas ou vers le haut. Le principe est que ma souris se trouve ici dans la plage centrale. L'événement de défilement du navigateur peut être utilisé en dehors de la plage, mais il est interdit à l'intérieur.

Answer 1

Utilisez cet événement de défilement pour contrôler la position de la boîte.

Answer 2

Obtenez la direction de défilement via l'événement de défilement et ajustez la position de p via votre propre calcul de programme. Vous pouvez utiliser transform pour CSS3. Si CSS3 n'est pas pris en charge, utilisez left et top.

.

Answer 3

Enveloppez un p dans la couche externe et définissez overflow:hidden pour couvrir simplement la barre de défilement interne.
Événement de défilement de la souris. $('.center').on() répond aux événements de la souris et empêche ensuite le bouillonnement.