0

In my website, I've a sticky container with a horizontal scroll direction.

The scroll works perfectly. However the issue is, when I tried to get a value from a CSS variable and assign it to Javascript I get this following error:

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

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

// Get existing CSS variable '--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; // '--padding-right' CSS value of '.js-h-scroll-content'
}

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`;
});
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;
}
<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>

Please see this codepen.

Improve this question
10
  • This is probably related: stackoverflow.com/questions/62218193/… and stackoverflow.com/questions/33198849/… - Commented Oct 10, 2024 at 9:24
  • 1
    spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`; - calcDynamicHeight tries to access the value of paddingRight, but you have not even set that at this point. Just move that line below the let paddingRight = gcs.getPropertyValue('--padding-right'); line. Commented Oct 10, 2024 at 9:26
  • @C3roe I tried your suggestion and the error disappeared but it creates another issue: on the front end, the horizontal scroll is endless. Commented Oct 10, 2024 at 9:33
  • 1
    Not really sure what that is supposed to mean to begin with, but you will have to do some more debugging then, I suppose. Commented Oct 10, 2024 at 9:36
  • 1
    maybe this is because the unit will then be used inside the javascript part. you can add the unit in css like this without adding it to the css custom property directly: padding: 0 0 0 calc(var(--padding-right) * 1px); Commented Oct 10, 2024 at 19:28
Related questions
5004
How do I check if an array includes a value in JavaScript?
4459
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
2878
Check if a variable is a string in JavaScript
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.