scrollIntoView()設置滾動條位置，html5

時間  2019-11-25
標籤 scrollintoview 設置 滾動條 位置 html5 html 欄目 HTML5 简体版
原文   原文鏈接
  1. <html>  
  2.     <head>  
  3.         <title>HTML5_ScrollInToView方法</title>  
  4.         <meta  charset="utf-8">  
  5.         <script type="text/javascript">  
  6.             window.onload = function(){  
  7.                 /*  
  8.                     若是滾動頁面也是DOM沒有解決的一個問題。爲了解決這個問題，瀏覽器實現了一下方法，  
  9.                 以方便開發人員如何更好的控制頁面的滾動。在各類專有方法中，HTML5選擇了scrollIntoView()  
  10.                 做爲標準方法。  
  11.                     scrollIntoView()能夠在全部的HTML元素上調用，經過滾動瀏覽器窗口或某個容器元素，  
  12.                 調用元素就能夠出如今視窗中。若是給該方法傳入true做爲參數，或者不傳入任何參數，那麼  
  13.                 窗口滾動以後會讓調動元素頂部和視窗頂部儘量齊平。若是傳入false做爲參數，調用元素  
  14.                 會盡量所有出如今視口中（可能的話，調用元素的底部會與視口的頂部齊平。）不過頂部  
  15.                 不必定齊平，例如：  
  16.                 //讓元素可見  
  17.                 document.forms[0].scrollIntoView();  
  18.                 當頁面發生變化時，通常會用這個方法來吸引用戶注意力。實際上，爲某個元素設置焦點也  
  19.                 會致使瀏覽器滾動顯示得到焦點的元素。  
  20.                     支持該方法的瀏覽器有 IE、Firefox、Safari和Opera。  
  21.                 */  
  22.                   
  23.                   
  24.                 document.querySelector("#roll1").onclick = function(){  
  25.                     document.querySelector("#roll_top").scrollIntoView(false);  
  26.                 }  
  27.                 document.querySelector("#roll2").onclick = function(){  
  28.                     document.querySelector("#roll_top").scrollIntoView(true);  
  29.                 }  
  30.             }  
  31.         </script>   
  32.         
  33. </html>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程