How can I detect the scroll width and differentiate between the mobile and the desktop versions?

Issue

Because of diferent sizes of scrollbar I'm getting a problem while using a fixed component in both mobile and desktop:

While the desktop version get correctly aligned with the components below, the mobile version doesn't. If I fix the width for the mobile the desktop will go over the component limit and it just doesn't work.

My css for it is as follow, the commented width is the one that works for the mobile. Anyone have any ideas?

.fixed-header {
  position: fixed;
  top: 56px;
  left: 14px;
  width: calc(100vw - 45px); //calc(100vw - 30px);
  z-index: 2;

  @include md {
    position: relative;
  }
}

Solution

I managed to do it by testing the scroll width in the ngOnInit as suggested in this answer (I edited a little for convenience), to test if it was mobile or not:

testIsMobile() {
    var scrollbox = document.createElement('div');
    scrollbox.style.overflow = 'scroll';
    document.body.appendChild(scrollbox);

    var scrollWidth = scrollbox.offsetWidth - scrollbox.clientWidth;

    document.body.removeChild(scrollbox);

    this.isMobile = scrollWidth == 0
}

Then I added the correct class through [ngClass]="fixedHeaderClass"

if (this.isMobile)
  this.fixedHeaderClass = "fixed-header-mobile";
else
  this.fixedHeaderClass = "fixed-header";

Answered By - Awybin