0

I'm working on a data table with a scrollable body and sortable, static headers, and when the vertical scrollbar appears, it messes with the right alignment between the header tags and the td tags below it.

Without questioning the HTML behind the table... Is there a way, using LESS, to calculate the width of the scrollbar in the scrollable element, so that I can assign it to a variable to use as padding in the row of headers above it? For example, in my Google chrome browser right now, padding the right of my header div with 18px fixes things, but I want this compatible across IE10+ and all other browsers.

If no other way, a vanilla JS ECMASCRIPT 6 method is preferred. I am not using jQuery in this application.

TylerH
  • 20,799
  • 66
  • 75
  • 101
ryan
  • 89
  • 10
  • Why not always make it scrollable via `overflow: scroll;` and then know it that way? do note that different browsers and platforms may have different scrollbar sizes – Dominik Jun 02 '20 at 22:27
  • Otherwise with js check other questions: https://stackoverflow.com/questions/3417139/how-do-i-calculate-the-height-of-toolbars-address-bars-and-other-navigation-too/3417992#3417992 – Dominik Jun 02 '20 at 22:29
  • @Dominik Different browsers and platforms having different scrollbars is why I want to be able to detect it - I can't just trust that the scrollbar in the browser will always have a width of 18px, so having the scrollbar always visible does not help this issue – ryan Jun 03 '20 at 15:52
  • Did you look at the question I linked? I think the answer to your question about whether you can measure the size of the scrollbar with css is `No` and how to do it in javascript has been asked and answered many many times. – Dominik Jun 03 '20 at 20:55
  • Thanks! I did take a look, but unfortunately I struggle to get it to readjust if the user resizes their window or zooms in/out of the browser – ryan Jun 03 '20 at 21:11
  • This would be a separate question then – Dominik Jun 04 '20 at 02:01

0 Answers0