Forum Discussion

kristinaArg's avatar
kristinaArg
Community Member
2 months ago
Solved

Text entry showing two scroll bars

Hi,

I have a multi-line text entry box, and initially, the scroll bar wouldn’t appear when the text exceeded the box size. To fix this, I added a JavaScript script to enable scrolling. While it worked, I’m now seeing two scroll bars—one inside the box and another that only appears when hovered over. When I remove the JavaScript code, the outer scroll bar appears but doesn't go up and down.

Could someone help me check this and find a fix?

Thanks!

  • Nedim's avatar
    Nedim
    2 months ago

    Hi Kristina,

    For some reason, the JavaScript code works only when the text entry box is on the base layer. It does not function as expected when the text entry box is on another layer. To fix this, try executing the following code when the timeline starts on this layer:

    const textAreas = document.querySelectorAll('textarea');
    
    textAreas.forEach(textArea => {
        textArea.style.scrollbarWidth = 'thin';
    });
    
    setInterval(() => {
        const mS = document.querySelectorAll('.micro-scrollbar');
        mS.forEach(m => {
            m.style.display = 'none';
        });
    }, 100);
    


    Note: When testing, please avoid randomly pressing keys too quickly, as typing too fast may momentarily break the code when the scrollbar is activated.

  • Nedim's avatar
    Nedim
    Community Member

    If you upload your .story file, I may be able to take a look for you. Otherwise, it’s difficult to troubleshoot without seeing your setup and JavaScript. Can you describe the ideal behavior you’re aiming for?

  • kristinaArg's avatar
    kristinaArg
    Community Member

    Hi Nedim,

    My apologies for taking some time to get back and thanks for your attention to this issue. Please see the Story file I attached here and refer to "Better version of email" layer. Thanks a ton! 

    https://drive.google.com/file/d/14oyTWEj2M618gZK2jfXtep32CwzztnkF/view?usp=sharing

    • Nedim's avatar
      Nedim
      Community Member

      Hi Kristina,

      For some reason, the JavaScript code works only when the text entry box is on the base layer. It does not function as expected when the text entry box is on another layer. To fix this, try executing the following code when the timeline starts on this layer:

      const textAreas = document.querySelectorAll('textarea');
      
      textAreas.forEach(textArea => {
          textArea.style.scrollbarWidth = 'thin';
      });
      
      setInterval(() => {
          const mS = document.querySelectorAll('.micro-scrollbar');
          mS.forEach(m => {
              m.style.display = 'none';
          });
      }, 100);
      


      Note: When testing, please avoid randomly pressing keys too quickly, as typing too fast may momentarily break the code when the scrollbar is activated.

      • kristinaArg's avatar
        kristinaArg
        Community Member

        Hello Nedim,

        MASSIVE PROPS to you! It worked! I really appreciate your help on this. :)