Heim > Web-Frontend > js-Tutorial > Hauptteil

Deaktivieren Sie das Scrollen der Seite

韦小宝
Freigeben: 2018-03-14 17:38:56
Original
5375 Leute haben es durchsucht

In diesem Artikel wird beschrieben, wie Sie das Scrollen auf der Seite deaktivieren können oder daran interessiert sind, das Scrollen auf der Seite zu deaktivieren. Okay, ohne weitere Umschweife , geben Sie ein. Kommen wir zur Sache

Erklärung:

1 Das Scrollen auf der Seite kann je nach tatsächlichem Bedarf dynamisch gesteuert werden.
2. Wenn es auf der mobilen Seite gesperrt werden kann, kann es auf dem PC gesperrt werden. Wenn es jedoch auf dem PC gesperrt werden kann, kann es auf der mobilen Seite nicht gesperrt werden, daher werde ich mich auf die mobile Seite konzentrieren
3. Der Code demonstriert das von mir verwendete Zepto (Sie können es möglicherweise nicht verwenden, aber Sie können es auf jeden Fall verstehen)

Vorwort:

Wenn Sie eine mobile Entwicklung durchführen, müssen Sie das Scrollen von Seiten auf Mobilgeräten deaktivieren. Heute werde ich die Methode zum Deaktivieren des Seitenscrollens auf Mobilgeräten zusammenfassen Szenario, das Ihren Anforderungen gerecht werden kann.

1.

 $(document).on('touchmove', function(e){
   e.preventDefault();
 })
Nach dem Login kopieren

2.

  body{    position: fixed;
    //根据需求添加top,left...
  }
Nach dem Login kopieren

3.

  body{    overflow: hidden;    /*height: 100%;*/
  }
Nach dem Login kopieren

4.Klicken Sie auf die Seite, die Seite stoppt an der angeklickten Position und dann sind Schieben und Scrollen ungültig

//根据这个思路,你也可以去应用于元素的禁止滚动$('body').on('tap', function(e){
  $(this).css('top', ('-' + $(window).scrollTop() + 'px'));
  $(this).css('position', 'fixed');
})
Nach dem Login kopieren

5 .Mobile VersionRetter Methode: Wenn Sie über einschlägige Entwicklungserfahrung verfügen, werden Sie feststellen, dass die vorherige Methode auf dem mobilen Endgerät auf magische Weise fehlschlägt, dann kann Ihnen diese Methode definitiv helfen

html,html{  overflow: hidden;  height: 100%;}
Nach dem Login kopieren

Fazit:

Das Obige ist der gesamte Inhalt dieses Artikels. Wenn Sie nicht viel darüber wissen, können Sie beides problemlos meistern Seiten alleine!

Verwandte Empfehlungen:

JavaScript implementiert die Deaktivierung des Pulldown-Rebound-Effekts des WeChat-Browsers

Wie kann man das Seiten-Caching deaktivieren?

So verwenden Sie H5, um die Funktion zum Deaktivieren der Skalierung hinzuzufügen

jQuery Überwachungscode-Scanner verhindert manuelle Eingabe. Implementierungsmethode

Das obige ist der detaillierte Inhalt vonDeaktivieren Sie das Scrollen der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!