Window scrollBy() 方法

绝地灬酷狼 2022-05-12 00:04 113阅读 0赞

## 定义和用法 ##

scrollBy() 方法可把内容滚动指定的像素数。

**注意：** 要使此方法工作 window 滚动条的可见属性必须设置为true！

## 语法 ##

scrollBy( *xnum,ynum*)

<table style="border-collapse:collapse;border:0px;color:#333333;font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;font-size:12px;line-height:normal;"> 
 <tbody style="border:0px;"> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">参数</th> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">描述</th> 
  </tr> 
  <tr style="border:0px;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">xnum</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">必需。把文档向右滚动的像素数。</td> 
  </tr> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">ynum</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">必需。把文档向下滚动的像素数。</td> 
  </tr> 
 </tbody> 
</table>

## 实例 ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>滚动条</title>
    <script>
    function scrollWindow(){
    	window.scrollBy(100,100);
    }
    </script>
    </head>
    <body>
    <script>
     for (var i=0;i<50;i++)
     {
     	document.write("第" + (i+1) + "行; ");
     	//输出空格，用于产生横向滚动条
     	for (var j=0; j<50; j++)
     	{
     		document.write("    ");
     	}
     	document.write ("<br>");
     }
    </script>
    <input type="button" οnclick="scrollWindow()" value="滚动条" />
    <script>
     for (var i=0;i<100;i++)
     {
     	document.write("第" + (i+1) + "行; ");
     	//输出空格，用于产生横向滚动条
     	for (var j=0; j<100; j++)
     	{
     		document.write("    ");
     	}
     	document.write ("<br>");
     }
    </script>
    </body>
    </html>

## 运行效果 ##

##    ![736d921e-0dc2-3d4c-a93f-31ec24ef3db3.png][]     ##

[736d921e-0dc2-3d4c-a93f-31ec24ef3db3.png]: /images/20220512/c3d6dfaf2ee545aea753d30a881aad2b.png