Different scroll behavior in Chrome and Firefox for dynamic content

user_11207798 0
Viewed 618

I have a fixed header and container div has scroll.

On click of a button I'm trying to add dynamic content on top it. Expected behavior is when dynamic content is added on top of button, button should be pushed down to make space for new element. This works fine in Firefox. But in Chrome button stays at the same place and browser scrolls upward.

Here is the codesandbox

https://codesandbox.io/s/nifty-allen-gtklp

Scroll down and click on the toggle button. Observe the behavior in Chrome and Firefox.

Anybody knows why the behavior is different?

firefox scroll google-chrome css
1 Answers

in mozilla, you should use:

body{
  overflow-y : scroll;
  scrollbar-color: blue;
  scrollbar-width: thin;
}

in chrome use:

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
user_140566480
Related