Utilisez jquery pour désactiver le défilement de la barre de défilement externe-js tutoriel-php.cn

Utilisez jquery pour désactiver le défilement de la barre de défilement externe

高洛峰

Libérer： 2017-01-11 10:05:13

original

1736 Les gens l'ont consulté

Avant-propos

Normalement, lorsque la barre de défilement interne défile vers les deux extrémités, la barre de défilement externe défile avec elle, mais parfois nous espérons que l'utilisateur ne peut faire défiler que la zone actuelle et le défilement externe ; la barre (fenêtre) n’est pas déclenchée. La barre de défilement externe ne peut défiler qu’après avoir quitté la zone actuelle. Parce que l'utilisateur peut accidentellement faire défiler trop loin, ce qui fait que la zone actuelle quitte la zone visible.

Dans jquery, l'événement scroll est scroll, et cet événement ne peut pas empêcher les événements de bouillonnement et par défaut. Si on configure pour désactiver la barre de défilement de la fenêtre, la stratégie que j'adopte est la suivante : lorsque la souris entre dans la zone courante, la hauteur de la barre de défilement de la fenêtre est toujours la hauteur avant l'entrée de la souris

Le code suivant :

<style type="text/css">
 .main{
 overflow: auto;
 width: 400px;
 height: 400px;
 border: 1px solid #aaa;
 }
 .main p{
 height: 800px;
 }
</style>
 
<body>
 <div id="main" class="main">
 <p></p>
 </div>
 <p style="height:1000px;"></p>
</body>
 
$(function () {
 var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度
 $(&#39;#main&#39;).hover(function(){
 scrollTop = $(window).scrollTop();
 }, function(){
 scrollTop = -1;
 });
 
 // 鼠标进入到区域后，则强制window滚动条的高度
 $(window).scroll(function(){
 scrollTop!==-1 && $(this).scrollTop(scrollTop);
 })
})

Copier après la connexion

Comme vous pouvez le voir dans le code ci-dessus, je n'ai pas empêché l'événement de la barre de défilement de la fenêtre, mais j'ai réaffecté la valeur à chaque fois que l'utilisateur faisait défiler.

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter une certaine aide aux études ou au travail de chacun. Bien sûr, il peut y avoir de meilleures méthodes. est invité à le fournir, merci !

Pour plus d'articles sur l'utilisation de jquery pour désactiver le défilement de la barre de défilement externe, veuillez faire attention au site Web PHP chinois !