Как подставлять в инлайн стили динамическое значение из функции?

Question

[jeruthadam]

Мне нужно вычислять ширину скроллбара в разных браузерах и это значение подставлять в инлайн стили. У меян есть такой код. Но на выходе получается 0px. При этом в консоль функция выводит правильное значение скролла. Как исправить?

const scrollSize = () => window.innerWidth - document.documentElement.clientWidth
if (!this.isActive) {
        document.documentElement.style.removeProperty('overflow')
        document.documentElement.style.removeProperty('padding-right')
        document.querySelector('.headroom').style.removeProperty('padding-right')
      } if (this.isActive) {
        document.documentElement.style.overflow = 'hidden'
        document.documentElement.style.paddingRight = scrollSize()
        document.querySelector('.headroom').style.paddingRight = scrollSize()
      }

Answer 1

[Kovalsky]

Ошибка логическая: вы пытаетесь получить разницу ширин после того как запрещаете overflow:

document.documentElement.style.overflow = 'hidden'
document.documentElement.style.paddingRight = scrollSize()

Т.к. ширина скроллбара постоянная, то можно сохранить её в переменную и потом использовать это значение:

const scrollSize = window.innerWidth - document.documentElement.clientWidth;

if (!this.isActive) {
	document.documentElement.style.removeProperty('overflow')
	document.documentElement.style.removeProperty('padding-right')
	document.querySelector('.headroom').style.removeProperty('padding-right')
} if (this.isActive) {
	document.documentElement.style.overflow = 'hidden'
	document.documentElement.style.paddingRight = scrollSize
	document.querySelector('.headroom').style.paddingRight = scrollSize
}

Comments

[jeruthadam]

Спасибо, так и есть.