suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie JQuery, um das Scrollen der äußeren Bildlaufleiste zu deaktivieren

Verwenden Sie JQuery, um das Scrollen der äußeren Bildlaufleiste zu deaktivieren

高洛峰
高洛峰Original
2017-01-11 10:05:131768Durchsuche

Vorwort

Wenn die innere Bildlaufleiste zu beiden Enden scrollt, scrollt normalerweise auch die äußere Bildlaufleiste mit. Manchmal hoffen wir jedoch, dass der Benutzer nur den aktuellen Bereich scrollen kann Die äußere Bildlaufleiste kann nur nach Verlassen des aktuellen Bereichs gescrollt werden. Denn der Benutzer könnte versehentlich zu weit scrollen, wodurch der aktuelle Bereich den sichtbaren Bereich verlässt.

In jquery ist das Scroll-Ereignis Scroll, und dieses Ereignis kann Sprudeln und Standardereignisse nicht verhindern. Wenn wir die Bildlaufleiste des Fensters deaktivieren, verfolge ich folgende Strategie: Wenn die Maus in den aktuellen Bereich eintritt, entspricht die Höhe der Bildlaufleiste des Fensters immer der Höhe vor dem Eintritt der Maus

Die Folgender Code: 

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

Wie Sie dem obigen Code entnehmen können, habe ich das Fenster-Bildlaufleisten-Ereignis nicht verhindert, sondern den Wert jedes Mal neu zugewiesen, wenn der Benutzer gescrollt hat.

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann kann es gerne zur Verfügung stellen, vielen Dank!

Weitere Artikel zur Verwendung von JQuery zum Deaktivieren des Scrollens der äußeren Bildlaufleiste finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Anker-Sprung-Bildlaufleiste reibungsloses Scrollen des Codes in einem SatzNächster Artikel：jQuery-Anker-Sprung-Bildlaufleiste reibungsloses Scrollen des Codes in einem Satz

In Verbindung stehende Artikel

Mehr sehen