scroll、scrollBy和 scrollTo三种方法定位滚动条位置，以及在vue中使用的注意事项

落日映苍穹つ 2022-05-25 11:52 482阅读 0赞

在默认情况下，页面加载完后默认滚动在最顶端，有些时候我们需要在页面打开后，定位滚动条的位置，比如，横向和纵向滚动条居中，实现页面滚动的方法有三种：scroll、scrollBy和 scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因此我们只需修改x,y的偏移量来设置滚动条的位置。另外，**页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload**。

方法一：用scroll方法实现滚动条位于最底端。

<table style="margin:0px;padding:0px;"> 
 <tbody> 
  <tr> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><code style="background-color:rgb(255,255,255);">1</code></td> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><code style="background-color:rgb(255,255,255);">&lt;&lt;/CODE&gt;<code>body</code>&nbsp;<code>onload</code><code>=</code><code>"scroll(0,document.body.scrollHeight) "</code><code>&gt;</code></code></td> 
  </tr> 
 </tbody> 
</table>

方法二：用scrollBy方法实现滚动条位于最右端。

<table style="margin:0px;padding:0px;"> 
 <tbody> 
  <tr> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><code style="background-color:rgb(255,255,255);">1</code></td> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><code style="background-color:rgb(255,255,255);">&lt;&lt;/CODE&gt;<code>body</code>&nbsp;<code>onload</code><code>=</code><code>"scrollBy(document.body.scrollWidth，0)&nbsp;"</code><code>&gt;</code></code></td> 
  </tr> 
 </tbody> 
</table>

方法三：用scrollTo方法实现水平滚动条和纵向滚动条均居中。

<table style="margin:0px;padding:0px;"> 
 <tbody> 
  <tr> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><code style="background-color:rgb(255,255,255);">1</code></td> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><code style="background-color:rgb(255,255,255);">&lt;&lt;/CODE&gt;<code>body</code>&nbsp;<code>onload</code><code>=</code><code>"scrollTo(document.body.scrollWidth/2,document.body.scrollHeight/2)"</code><code>&gt;</code></code></td> 
  </tr> 
 </tbody> 
</table>

虽然使用scroll、scrollBy和scrollTo方法的效果一样，但是彼此之间还是有一些区别的。  
经测试如果使用某一确定的位置参数时，不需要带单位，例据顶端300像素:

<table style="margin:0px;padding:0px;"> 
 <tbody> 
  <tr> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><span style="background-color:rgb(255,255,255);"><br></span></td> 
   <td style="margin:0px;padding:0px;font-size:12px;font-family:Verdana, '宋体', sans-serif;line-height:18px;"><code style="background-color:rgb(255,255,255);">&lt;&lt;/CODE&gt;<code>body</code>&nbsp;<code>onload</code><code>=</code><code>"scroll(0,300) "</code><code>&gt;<br></code></code></td> 
  </tr> 
 </tbody> 
</table>

注意：在vue中使用时，事件触发后，实现页面滚动，需要在nextTick()方法中执行。

例如：     this.$refs.table.style\[ 'justify-content'\] = 'flex-start'; //flex布局：项目位于容器开头

this. $nextTick( () *=>* \{ //图片列表栏始终左对齐

this.$refs.table. scrollBy(document.body.scrollWidth, 0)

\})