Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-um8sx7?file=package.json&terminal=dev

Steps to reproduce

1. Drag the scroll bar to the bottom
2. click UI anywhere(Click on it a few times and you'll see the scroll will scrolling accidentally)

What is expected?

The scroll bar will NOT scroll accidentally.

What is actually happening?

The scroll bar will scroll accidentally.

System Info

No response

Any additional comments?

this react version https://stackblitz.com/edit/react-ts-shvbn3?file=style.css,App.tsx The scroll bar will NOT scroll accidentally.

The scroll bar will scroll accidentally, only when Drag the scroll bar to the bottom(untill see the three red dom ) opposite, the scroll will NOT scroll accidentally.

The result of both renderings is same and the height is exactly the same

I can't reproduce but also, the scrollbar handling is not related to Vue. My guess is you are relying on a browser side effect related to how elements are updated/inserted/removed but if you want to control the scroll position, you need to add the code to handle it

I think it has something to do with vue. react version code and vue version code exactly same, but react not have this problem

please look at this video

https://www.haolu.com/share/V00VJHGR2G/67fca5c391a751f1bef4a1c67625fa5a

@posva

VUE: https://stackblitz.com/edit/vitejs-vite-um8sx7?file=src%2FApp.vue&terminal=dev react: https://stackblitz.com/edit/react-ts-shvbn3?file=style.css,App.tsx

and more, if you Uncomment 59 line code // r[5].part = '反'; this bug will disappear

I can reproduce it. but I think this might be related to CSS rules. Could you reproduce it after removing all styles?

and more, if you Uncomment 59 line code // r[2].part = '反'; this bug will disappear

still can reproduce.

if you remove display: flex rule of body. It will disappear.

I can reproduce it. but I think this might be related to CSS rules. Could you reproduce it after removing all styles?

and more, if you Uncomment 59 line code // r[2].part = '反'; this bug will disappear

still can reproduce.

if you remove display: flex rule of body. It will disappear.

done. this is all css

#reader {
  white-space: break-spaces;
}
[part='一'] {
  color: red;
}

"if you remove display: flex rule of body. It will disappear."

好像并不是. 如果你再手动滚动一下滚动条, 这个bug就会重新出现. 而且这个bug只在"三个一"出现在屏幕的时候出现

It doesn't seem to be. If you scroll the scroll bar manually again, the bug will reappear. And the bug only appears when "three red color '一'" appear on the screen

So is this really not a vue bug? @posva @edison1105