Verwenden Sie JQuery, um das Scrollen der äußeren Bildlaufleiste zu deaktivieren-js-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-01-11 10:05:13

Original

1704 Leute haben es durchsucht

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

Nach dem Login kopieren

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!