将CSS变量值赋值给JavaScript时触发ReferenceError错误求助

网站内的粘性水平滚动容器功能正常，但在尝试读取CSS变量--padding-right的值并在JavaScript中使用时，出现如下错误：

ReferenceError: can't access lexical declaration 'paddingRight' before initialization

相关代码 #

JavaScript #

const spaceHolder = document.querySelector('.js-scroll-wrapper');
const horizontal = document.querySelector('.js-scroll-direction');

// 获取CSS变量'--padding-right'
let el = document.querySelector('.c-scroll__content');
let gcs = getComputedStyle(el);
let paddingRight = gcs.getPropertyValue('--padding-right');

// alert('The value of the css variable is : ' + (paddingRight?paddingRight:'undefined'));

spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`; 

function calcDynamicHeight(ref) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const objectWidth = ref.scrollWidth;

  return objectWidth - vw + vh + paddingRight; // 使用'.js-h-scroll-content'的CSS变量值
}

window.addEventListener('scroll', () => {
  const sticky = document.querySelector('.js-scroll-sticky');
  horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});

window.addEventListener('resize', () => {
  spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});

CSS #

body{
  font-family: 'Helvetica', arial, sans-serif;
  font-size: 2em;
}

.c-spacer{
    display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
    clear: both;
}

.c-scroll{
    width: 100%;
}

.c-scroll__container{
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
}

.c-scroll__wrapper{
    position: relative;
    width: 100%;
}
    
.c-scroll__sticky{
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

.c-scroll__horizontal{
    position: absolute;
    height: 100%;
    will-change: transform;
}

.c-scroll__content{
    --padding-right: 100;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    height: 100%;
    padding: 0 0 0 var(--padding-right);    
}

.c-scroll__item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 15em;
    height: 15em;
    margin-right: 2em;
    padding: 1em;
    border: 1px solid black;    
}

.c-scroll__item:last-child{
    margin-right: 0;
}

.c-scroll__item-title{
  font-size: inherit;
  margin: 0;
}

.c-scroll__item-desc p{
  font-size: 0.75em;
}

HTML #

<div class="c-spacer">Scroll</div>

<div class="c-scroll js-scroll">
  <div class="c-scroll__container">
    <div class="c-scroll__wrapper js-scroll-wrapper">
      <div class="c-scroll__sticky js-scroll-sticky">
        <div class="c-scroll__horizontal js-scroll-direction">
          <div role="feed" class="c-scroll__content js-scroll-content">
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 1</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 2</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 3</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 4</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 5</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 6</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 7</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 8</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 9</h2>
            </div>
            <div class="c-scroll__item">
              <h2 class="c-scroll__item-title">Título 10</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="c-spacer">End scroll</div>

这个错误源于函数提升机制：calcDynamicHeight函数会被提升到当前作用域的顶部，导致函数内部引用的paddingRight变量在初始化前就被访问。

修复方案（推荐） #

将CSS变量的获取逻辑移到函数内部，让函数独立于外部变量的初始化顺序，同时解决字符串计算的潜在问题：

const spaceHolder = document.querySelector('.js-scroll-wrapper');
const horizontal = document.querySelector('.js-scroll-direction');

// 先定义函数，确保内部逻辑完整
function calcDynamicHeight(ref) {
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const objectWidth = ref.scrollWidth;
  
  // 在函数内部获取CSS变量，保证值已初始化
  const el = document.querySelector('.c-scroll__content');
  const gcs = getComputedStyle(el);
  // 转换为数值并设置默认值，避免字符串拼接或NaN
  const paddingRight = parseInt(gcs.getPropertyValue('--padding-right'), 10) || 0;

  return objectWidth - vw + vh + paddingRight;
}

// 调用函数设置高度
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`; 

window.addEventListener('scroll', () => {
  const sticky = document.querySelector('.js-scroll-sticky');
  horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});

window.addEventListener('resize', () => {
  spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});

额外优化说明 #

• 用parseInt将CSS变量值转换为数值，避免原代码中字符串相加导致的计算错误（比如"100"会被当作字符串拼接而非数值计算）
• 添加|| 0默认值，防止CSS变量未定义时出现NaN

内容的提问来源于stack exchange，提问作者Mathieu Préaud