按住鼠标并向侧面移动时,滚动条会跳跃

时间:2017-03-20 22:28:36

标签: html css css3

我想知道这只是浏览器的行为方式,还是我可以改变的CSS属性。

举一个我做​​的简单例子:https://jsfiddle.net/ogLw3ptj/

HTML:

<div class="box-with-scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS:

.box-with-scroll 
{
  overflow-y: scroll;
  width: 200px;
  height: 500px;
  border: 1px dashed black;
  padding: 15px;
}

Repro步骤:

(1)垂直居中滚动

(2)单击并按住滚动条

(3)将鼠标直接移到右侧

(4)滚动条&#34;跳跃&#34;顶部

我想要显示图片,但是PrtScn没有显示鼠标指针:(

发生在我尝试过的所有浏览器中

1 个答案:

答案 0 :(得分:0)

这是默认行为,当您将光标移出位置时,它会将滚动条重新定位到原始位置(滚动条周围似乎有一个矩形)

相关信息:

Source 1 UX Stackexchange

Source 2 Bug Report Chromium

相关问题