单击`<select>`会导致页面不必要地移动

Question

步骤：

在Chrome中打开这个REPL (在火狐中没有问题)- https://svelte.dev/repl/b739483ffedc4e33bc4f6f2626c013ff?version=3.47.0

  <div style="display: flex; align-items: flex-start;">
      <!-- svelte-ignore a11y-autofocus -->
      <select style="position: sticky; top: 10px;">
          <option>he1</option>
          <option>he2</option>
          <option>he3</option>
          <option>he4</option>
      </select>
      
      <div style="height: 1000px;"></div>
  </div>

<select>

• the
• 向下滚动页面
• ，单击

页面将自动滚动到顶部

​

​

应该是这样:页面根本不应该滚动。

Answer 1

很奇怪，但很管用:很奇怪，但很管用：

https://svelte.dev/repl/3c59bf53bf2a4f7b841edc03c6e1839d?version=3.47.0

<div style="display: flex; align-items: flex-start;">
    <!-- svelte-ignore a11y-autofocus -->
    <select style="position: sticky; top: 10px;"
        on:mousedown={ e=> e.target.focus({ preventScroll: true }) }
    >
        <option>he1</option>
        <option>he2</option>
        <option>he3</option>
        <option>he4</option>
    </select>
    
    <div style="height: 1000px;"></div>
</div>

这个：on:mousedown={ e=> e.target.focus({ preventScroll: true }) }

如果你有更好的东西，请提供。