参考手册
Window 对象
resizeTo()
scrollTo()
返回 Window 对象

Window scrollBy() 方法

实例

将文档水平滚动 100px:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   width: 5000px;
  7. }
  9. button {
  10.   position: fixed;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <p>单击该按钮可将文档窗口水平滚动 100px。</p>
  18. <p>查看水平滚动条以查看效果。</p>
  20. <button onclick="scrollWin()">单击水平滚动！</button><br><br>
  22. <script>
  23. function scrollWin() {
  24.   window.scrollBy(100, 0);
  25. }
  26. </script>
  28. </body>
  29. </html>
运行一下

定义与用法

scrollBy() 方法按指定的像素数滚动文档。

注意：要使此方法可用，必须将窗口滚动条的 visible 属性设置为 true！

浏览器支持

方法
scrollBy()YesYesYesYesYes

语法

  1.  window.scrollBy(xnum, ynum)

参数值

参数Type描述
xnumNumber必填。沿 x 轴（水平）滚动的像素数。正值将向右滚动，负值将向左滚动
ynumNumber必填。沿 y 轴（垂直方向）滚动的像素数。正值向下滚动，负值向上滚动

技术细节

返回值:无返回值

更多实例

实例

将文档垂直滚动 100px:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击该按钮可将文档窗口垂直滚动 100px。</p>
  7. <button onclick="scrollWin()" style="position:fixed;">单击垂直滚动！</button>
  8. <br><br>
  10. <p>一些文本和换行符以确保能够滚动！</p>
  11. <br>
  12. <br>
  13. <br>
  14. <br>
  15. <br>
  16. <br>
  17. <br>
  18. <br>
  19. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  20. <br>
  21. <br>
  22. <br>
  23. <br>
  24. <br>
  25. <br>
  26. <br>
  27. <br>
  28. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  29. <br>
  30. <br>
  31. <br>
  32. <br>
  33. <br>
  34. <br>
  35. <br>
  36. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  37. <br>
  38. <br>
  39. <br>
  40. <br>
  41. <br>
  42. <br>
  43. <br>
  44. <br>
  45. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  46. <br>
  47. <br>
  48. <br>
  49. <br>
  50. <br>
  51. <br>
  52. <br>
  53. <br>
  54. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  55. <br>
  56. <br>
  57. <br>
  58. <br>
  59. <br>
  60. <br>
  61. <br>
  62. <br>
  63. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  64. <br>
  65. <br>
  66. <br>
  67. <br>
  68. <br>
  69. <br>
  70. <br>
  71. <br>
  72. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  73. <br>
  74. <br>
  75. <br>
  76. <br>
  77. <br>
  78. <br>
  79. <br>
  80. <br>
  81. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  82. <br>
  83. <br>
  84. <br>
  85. <br>
  86. <br>
  87. <br>
  88. <br>
  89. <br>
  90. <p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
  91. <br>
  92. <br>
  94. <script>
  95. function scrollWin() {
  96.   window.scrollBy(0, 100);
  97. }
  98. </script>
  100. </body>
  101. </html>
运行一下
实例

水平和垂直滚动文档:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   height: 7500px;
  7.   width: 5000px;
  8. }
  10. button {
  11.   position: fixed;
  12. }
  13. </style>
  14. </head>
  15. <body>
  17. <p>单击其中一个按钮（多次）滚动文档窗口。</p>
  18. <p>查看每个滚动条以查看效果。</p>
  20. <button onclick="scrollWin(0, 50)">向下滚动</button><br><br>
  22. <button onclick="scrollWin(0, -50)">向上滚动</button><br><br>
  24. <button onclick="scrollWin(100, 0)">向右滚动</button><br><br>
  26. <button onclick="scrollWin(-100, 0)">向左滚动</button><br><br>
  28. <script>
  29. function scrollWin(x, y) {
  30.   window.scrollBy(x, y);
  31. }
  32. </script>
  34. </body>
  35. </html>
运行一下

相关页面

Window 对象: scrollTo() 方法

resizeTo()
scrollTo()

分类导航