Auto Scroll text within a container with scroll bars

Ask the community
, , ,
1

Question:
is there anyway to auto scroll the contents of a text box?

Product:
Wix Studio

What are you trying to achieve:
I have a large amount of text to place into a text box (the text is coming from an outside source … basically a chatbot). While placing the text box in a container with scroll bars allows the user to scroll forward to see all the text, I’d like it the container to auto scroll so the user see’s the last response, as opposed to having to scroll themselves. Wix doesn’t support the scrolltoTop attribute in a box object.

What have you already tried:
I tried some javascript, but wix doesn’t support the element attribute to scroll to top, or height.

Additional information:
I’m a cut and paste coder, so if you have code suggestions, please be clear and specfic as to where i would place it.

Thanks !

2

I think in this case your only option would be to rebuild your wished functionality inside a HTML-Component or Custom-Element. As of my knowledge, there is no such opertunity given by wix out of the box functionalities.

  1. Put a HTML-Component onto your page.
  2. Paste this code inside your HTML-Component.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Scrolling</title>
  <style>
    #scrollingText {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
  </style>
</head>
<body>

<div id="scrollingTextContainer">
  <textarea id="scrollingText" rows="4" cols="50" readonly>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat.
  </textarea>
</div>

<script>
  // Function to scroll text inside a textarea
  function scrollText() {
    var scrollingText = document.getElementById('scrollingText');
    scrollingText.scrollTop += 1;

    // Reset scroll to the top when it reaches the bottom
    if (scrollingText.scrollTop === (scrollingText.scrollHeight - scrollingText.clientHeight)) {
      scrollingText.scrollTop = 0;
    }
  }

  // Set interval to call the scrollText function every 50 milliseconds
  setInterval(scrollText, 50);
</script>

</body>
</html>
  1. Save Component settings.
  2. Test functionality.