Svelte 3如何阻止修改number/range类型input值时页面滚动到顶部

Svelte 3 本身没有内置和 sapper:noscroll 对应的针对input值修改场景的专用指令，你遇到的滚动问题和Sapper路由跳转触发的滚动属于两类不同场景，可通过以下几种方案解决：

• 方案1：阻止input修改值时的默认滚动行为
  在input的输入事件中调用preventDefault()，拦截浏览器默认的滚动到控件定位逻辑，不会影响值的绑定效果：

<input 
  type="number" 
  bind:value={temper} 
  min="0" 
  max="50"
  on:input={(e) => e.preventDefault()}
/>

• 方案2：固定input的DOM节点避免重渲染
  如果滚动是因为值更新触发了上层DOM重排、Svelte销毁重建input节点导致的，给input加固定key属性，强制Svelte复用同一个DOM节点：

<input 
  type="number" 
  bind:value={temper} 
  min="0" 
  max="50"
  key="fixed-temper-input"
/>

• 方案3：手动记录恢复滚动位置
  如果前两种方案都不生效，可以在值更新前记录当前页面滚动位置，DOM更新完成后恢复：

<script>
  let temper = 0;

  function handleInput(e) {
    const currentScroll = window.scrollY;
    temper = e.target.value;
    requestAnimationFrame(() => {
      window.scrollTo(0, currentScroll);
    })
  }
</script>

<input 
  type="number" 
  bind:value={temper} 
  min="0" 
  max="50"
  on:input={handleInput}
/>

内容的提问来源于stack exchange，提问作者Gani Ganapathi