Maison > Article > interface Web > Utilisez jquery pour désactiver le défilement de la barre de défilement externe

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

高洛峰original: 2017-01-11 10:05:131706parcourir

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

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：barre de défilement de saut d'ancre jQuery code de défilement fluide en une phraseArticle suivant：barre de défilement de saut d'ancre jQuery code de défilement fluide en une phrase

Articles Liés

Voir plus