1

Let's say we have 2 <div> elements, one being the parent, other being the child. Is there a way to make only the parent <div> scrollable on Chrome and only the child <div> scrollable on FireFox?

This might sound a bit weird, but this is something I really need to implement on my project, because FireFox is acting really weird on that matter.

Thanks in advance.

UPDATE:

Here's a simplified description of the project I mentioned.

I'm intending to design a personal HTML template with page transitions. So each page will be displayed/hidden with a transition effect when user clicks on a menu item.

I'm using a very simple transition effect I wrote myself. So, <div id="main"> is the parent and some <div class="inner-page"> are the children. Needless to say that, based on their content, each .inner-page has different height.

For #main I've set overflow-y: scroll;. On Chrome it works flawless. So, with every .inner-page being displayed, the length of the scrollbar is updated based on the height of the active page.

On FireFox however, it's a different story. The length of scrollbar doesn't change and is always the same, based on the length of the page which has the most and longest content. So when other pages (which have fewer content) are active, there's always a huge empty scrollable area at the bottom of that active page.

An alternative solution I tried (which worked) was to set overflow-y: scroll; for .inner-page instead of #main to solve the scrollbar length issue. But then I had to hide the scrollbar, because with each page transition, the scrollbar comes and goes with the page as well, something that doesn't look good at all.

Follow this CodePen link to see a simplified version of my code and how the scrollbar behaves differently on Chrome and FireFox.

Kyan
  • 65
  • 1
  • 8
  • Could you include your code and also describe what 'acting really weird' means? Browsers do differ, for example in exactly where they position the scrollbar, but the behaviour shouldn't be functionally different so it's difficult to know what the problem is you are having. Browser sniffing is not very recommended if there is another way to sort the problem. – A Haworth Jan 01 '21 at 10:29
  • @AHaworth Thanks for your comment. I updated the question and added some details. Feel free to have a look. – Kyan Jan 01 '21 at 11:46
  • Please include the minimal code that shows the problem, preferably as a snippet. Be very wary of browser sniffing. – A Haworth Jan 01 '21 at 12:55
  • @AHaworth Please follow this link: https://codepen.io/arash-brznd/pen/ExgQJNx I've tried to write something similar on CodePen. Please try that on both Chrome and FireFox to see the difference. – Kyan Jan 01 '21 at 13:52

1 Answers1

0

Check the browser on page load, Here and add set the overflow of div hidden for Firefox.

overflow: hidden;

Lets say you added class ".firefox-scroll"

.firefox-scroll { overflow: hidden; }

Mushahid
  • 18
  • 1
  • 10