浏览器刷新不记住之前的滚动位置

什么意思呢？其实是个浏览器的一个小细节哈，大家可以随便找个网址（B站或者csdn啥的），内容超出浏览器可视区域的都可以，右侧会有个滚动条，这时候向下滚动，然后去刷新浏览器，你会发现浏览器默认会记住当前滚动的位置，可能某些场景下，我们不想让它记住，刷新浏览器想让它回到顶部的位置，这时候怎么去处理呢？下面来简单介绍

因为咱也是Vue技术栈的小伙子，所以这里还是以Vue为例 

首先大家都知道，当我们不给页面设置高度的时候，如果内容过长（超出了浏览器可视区域） ，那么浏览器就会自动有产生滚动条，这个情况下（就是浏览器自动生成滚动条的情况），当我们去刷新浏览器的时候，浏览器就会记住之前的滚动位置。这应该也是浏览器的默认行为，当然我们可以阻止这一默认行为。

还一种方式就是我们不要让浏览器生成滚动条，我们给外层的div容器设置宽高都为100%（可以想象100vw，100vh这样子），然后我们设置overflow: auto;这一属性，这样的话产生的滚动条就不是浏览器的，而是我们的div，这个时候刷新就不会记住之前的滚动位置了

代码也很简单，如下：

1. 我们不设置高度，内容过长自动产生滚动条 

<template>
  <div id="app">
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    // 让浏览器刷新的时候不记住之前的滚动位置 默认值：auto
    if(history.scrollRestoration) {
      history.scrollRestoration = 'manual'
    }
  }
}
</script>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  width: 100vw;
  height: 100vh;
}
.hight {
  width: 100%;
  height: 100px;
  background: red;
  margin-bottom: 100px;
}
</style>      

核心代码就是 

if(history.scrollRestoration) {
  history.scrollRestoration = 'manual'
}      

2. 给外层div容器设置宽高，并设置overflow: auto;

<template>
  <div id="app">
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
    <div class="hight"></div>
  </div>
</template>

<script>
export default {
  name: "App",
}
</script>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
.hight {
  width: 100%;
  height: 100px;
  background: red;
  margin-bottom: 100px;
}
</style>