-1

I had a vertical scroll frame with a black box centered in it but when testing it in Windows, it was getting covered by scroll bars so I had to add more padding to it. Now on windows, it looks fine as there is room for the scroll and the black box is centered ( https://i.stack.imgur.com/mkNmA.png ) . But now on Macs since the scrollbars don't show, there is a ton of extra space on the right side before the dividing line shows ( https://i.stack.imgur.com/eIsNw.jpg ).
Is there any way to resolve this cleanly ?

burtonLowel
  • 734
  • 7
  • 17
  • Is disabling scrollbars entirely an option you want to make? You can't detect if a scrollbar is present with CSS. Your code really shouldn't have needed padding to avoid colliding with the scrollbar though. can you please post it? – Libra Oct 31 '19 at 19:52
  • if I can disable scrollbar for ALL, then that'd be fine! I can do that for Windows' browsers? – burtonLowel Oct 31 '19 at 19:53
  • https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll – Libra Oct 31 '19 at 19:54
  • Definitely consider that there really is no reason your page would need padding to avoid colliding with the scrollbar. The scrollbar makes the view-pane smaller, it doesn't lay over the top of it. – Libra Oct 31 '19 at 19:55
  • thanks! This is exactly what I'm going to do – burtonLowel Oct 31 '19 at 20:10

2 Answers2

0

You should try to detect if the window have a scrollbar with Javascript


if ((window.innerWidth - document.documentElement.clientWidth) > 0) {
  // Do some stuff like
  document.body.classList.add('withScrollbar')
}
Punkte
  • 21
  • 2
0

You can compare the clientHeight and scrollHeight of any scrolling element to determine if the scrollbars are showing. You can add a clientWidth and scrollWidth comparison if the container can also scroll horizontally.

const element = document.querySelector('.scroll-container')

if(element.clientHeight > element.scrollHeight) {
  element.classList.add('scroll-active')
}
else {
  element.classList.remove('scroll-active')
}
BPS Julien
  • 126
  • 2