Detaillierte Erläuterung der Verwendung von scrollIntoView in h5-H5-Tutorial-php.cn

Inhaltsverzeichnis

html

css

2. Scroll-Überwachung

Heim

Web-Frontend

H5-Tutorial

Detaillierte Erläuterung der Verwendung von scrollIntoView in h5

Jun 25, 2017 am 10:03 AM

html5 ie 元素控制滚动页面

Wenn die Seite gescrollt wird, ist dies ebenfalls ein Problem, das DOM nicht löst. Um dieses Problem zu lösen, haben Browser eine Methode implementiert, mit der Entwickler das Scrollen der Seite besser steuern können. Unter verschiedenen proprietären Methoden hat HTML5 scrollIntoView() als Standardmethode ausgewählt. scrollIntoView() kann für alle HTML-Elemente aufgerufen werden. Durch Scrollen im Browserfenster oder einem Containerelement kann das aufrufende Element im Fenster erscheinen. Wenn „true“ als Parameter an diese Methode übergeben wird oder keine Parameter übergeben werden, ist die Oberkante des angepassten Elements nach dem Scrollen des Fensters so bündig wie möglich mit der Oberkante des Fensters. Wenn false als Parameter übergeben wird, wird das aufrufende Element so vollständig wie möglich im Ansichtsfenster angezeigt (wenn möglich, ist die Unterseite des aufrufenden Elements bündig mit der Oberseite des Ansichtsfensters). Die Oberseite ist jedoch nicht unbedingt bündig .

1.scrollIntoView

html

&lt;div&gt;&lt;h2&gt;scrollIntoView&lt;/h2&gt;&lt;button id=&quot;roll1&quot;&gt;scrollIntoView(false)&lt;/button&gt;&lt;button id=&quot;roll2&quot;&gt;scrollIntoView(true)&lt;/button&gt;&lt;div&gt;&lt;div id=&quot;myDiv&quot;&gt;&lt;/div&gt;&lt;div id=&quot;roll_top&quot;&gt;scrollIntoView(ture)元素上边框与视窗顶部齐平&lt;span id=&quot;bottom&quot;&gt;scrollIntoView(false)元素下边框与视窗底部齐平&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

Nach dem Login kopieren

css

       #myDiv {height: 900px;background-color: gray;

        }#roll_top {height: 900px;background-color: green;color: #FFF;font-size: 50px;position: relative;
        }#bottom {position: absolute;display: block;left: 0;bottom: 0;
        }

Nach dem Login kopieren

js

  window.onload = function () {
        document.querySelector("#roll1").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(false);
        };
        document.querySelector("#roll2").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(true);
        };
    }

Nach dem Login kopieren

2. Scroll-Überwachung

html

&lt;div&gt;&lt;h2&gt;scroll&lt;/h2&gt;&lt;div id=&quot;nav&quot;&gt;&lt;div class=&quot;f1&quot;&gt;floor1&lt;/div&gt;&lt;div class=&quot;f2&quot;&gt;floor2&lt;/div&gt;&lt;div class=&quot;f3&quot;&gt;floor3&lt;/div&gt;&lt;div class=&quot;f4&quot;&gt;floor4&lt;/div&gt;&lt;div class=&quot;f5&quot;&gt;floor5&lt;/div&gt;&lt;/div&gt;&lt;p&gt;页面结构&lt;/p&gt;&lt;div class=&quot;main&quot;&gt;&lt;div id=&quot;f1&quot;&gt;测试1&lt;/div&gt;&lt;div id=&quot;f2&quot;&gt;测试2&lt;/div&gt;&lt;div id=&quot;f3&quot;&gt;测试3&lt;/div&gt;&lt;div id=&quot;f4&quot;&gt;测试4&lt;/div&gt;&lt;div id=&quot;f5&quot;&gt;测试5&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

Nach dem Login kopieren

css

      .main div {height: 1000px;width: 300px;margin: 20px;background-color: #C0C0C0;
        }#nav {position: fixed;width: 100px;height: 200px;top: 40%;right: 10px;
        }#nav div {cursor: pointer;text-align: center;

        }

Nach dem Login kopieren

js

    $(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件var wst = $(window).scrollTop(); //滚动条距离顶端值for (var i = 1; i &lt; 6; i++) {             //加循环if ($(&quot;#f&quot; + i).offset().top &lt;= wst + 10) { //判断滚动条位置$(&#39;#nav div&#39;).css(&quot;background-color&quot;, &quot;white&quot;);
                    $(&quot;.f&quot; + i).css(&quot;background-color&quot;, &quot;red&quot;);
                }
            }
        });
        $(&#39;#nav div&#39;).click(function () {
            $(&#39;html,body&#39;).animate({scrollTop: $(&quot;#&quot; + this.className).offset().top}, 500);//          $(&quot;#&quot; + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()});
    });

Nach dem Login kopieren

Alle Codes

<!DOCTYPE html><html><head><meta charset="utf-8"><title>h5之scrollIntoView控制页面元素滚动</title><style>/*scrollIntoView*/#myDiv {height: 900px;background-color: gray;}#roll_top {height: 900px;background-color: green;color: #FFF;font-size: 50px;position: relative;}#bottom {position: absolute;display: block;left: 0;bottom: 0;}/*scroll*/.main div {height: 1000px;width: 300px;margin: 20px;background-color: #C0C0C0;}#nav {position: fixed;width: 100px;height: 200px;top: 40%;right: 10px;}#nav div {cursor: pointer;text-align: center;}</style></head><body>&lt;div&gt;&lt;h2&gt;scrollIntoView&lt;/h2&gt;&lt;button id=&quot;roll1&quot;&gt;scrollIntoView(false)&lt;/button&gt;&lt;button id=&quot;roll2&quot;&gt;scrollIntoView(true)&lt;/button&gt;&lt;div&gt;&lt;div id=&quot;myDiv&quot;&gt;&lt;/div&gt;&lt;div id=&quot;roll_top&quot;&gt;scrollIntoView(ture)元素上边框与视窗顶部齐平&lt;span id=&quot;bottom&quot;&gt;scrollIntoView(false)元素下边框与视窗底部齐平&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;h2&gt;scroll&lt;/h2&gt;&lt;div id=&quot;nav&quot;&gt;&lt;div class=&quot;f1&quot;&gt;floor1&lt;/div&gt;&lt;div class=&quot;f2&quot;&gt;floor2&lt;/div&gt;&lt;div class=&quot;f3&quot;&gt;floor3&lt;/div&gt;&lt;div class=&quot;f4&quot;&gt;floor4&lt;/div&gt;&lt;div class=&quot;f5&quot;&gt;floor5&lt;/div&gt;&lt;/div&gt;&lt;p&gt;页面结构&lt;/p&gt;&lt;div class=&quot;main&quot;&gt;&lt;div id=&quot;f1&quot;&gt;测试1&lt;/div&gt;&lt;div id=&quot;f2&quot;&gt;测试2&lt;/div&gt;&lt;div id=&quot;f3&quot;&gt;测试3&lt;/div&gt;&lt;div id=&quot;f4&quot;&gt;测试4&lt;/div&gt;&lt;div id=&quot;f5&quot;&gt;测试5&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;<script>window.onload = function () {/* 如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。
         在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用，
         通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，
         那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.         */document.querySelector("#roll1").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(false);
        };
        document.querySelector("#roll2").onclick = function () {
            document.querySelector("#roll_top").scrollIntoView(true);
        };
    }</script><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js?1.1.11"></script><script>$(function () {
        $(window).scroll(function () {//为页面添加页面滚动监听事件var wst = $(window).scrollTop(); //滚动条距离顶端值for (var i = 1; i < 6; i++) {             //加循环if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置                    $('#nav div').css("background-color", "white");
                    $(".f" + i).css("background-color", "red");
                }
            }
        });
        $('#nav div').click(function () {
            $('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);//          $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()});
    });</script></body></html>

Nach dem Login kopieren

Code anzeigen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von scrollIntoView in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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