Forum Discussion
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!
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.
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?
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=sharingHi 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.Hello Nedim,
MASSIVE PROPS to you! It worked! I really appreciate your help on this. :)
