TextBox scroll to bottom

Ask the community
,
1

Hi, how can I programmatically scroll a textbox to the bottom as I add text to it? I tried scrollTo() but it scrolls my window instead of the textbox.

for(let t = 0; t < 1000; t++)
{
$w ( “#txtBox” ). value += “\n” + t ;
}
$w ( “#txtBox” ). scrollTo ();

2

You can’t to it with Velo.
However you can create your own textbox in an embedded widget (iframe) or in a custom element, and scroll it down using CSS or JS. Plenty of examples on Google.

3

Thank you for your reply. Do you have any links? I tried looking it up, but couldn’t find anything. Thank you.

4

@J. D. I tried this code, but don’t know where to insert the scrollTo() command. I need to scroll to the bottom as text is added.

$w . onReady ( function () { console . log ( “READY” );
$w ( “#html1” ). onMessage (( event ) => {
console . log ( Message received by page code: ${ event . data });
});
$w ( “#button1” ). onClick (( event )=>{
$w ( “#html1” ). postMessage ( “Message from page code!” );
$w ( “#html1” ). scrollTo ();
});
});

function init () { // when a message is received from the page code window.onmessage = (event) => {console.log(event) if (event.data) { console.log("HTML Code Element received a message!"); insertMessage(event.data); alert(event.data); } } // display received message function insertMessage(msg) { document.getElementById('demo').innerHTML += "
" + msg; } } 
      window.parent.postMessage('message from iframe', '*'); 

  </script> 
  
  </head> 

  <body onload="init();" style="background-color:grey;"> 
     <p id="demo">Message will go here</p> 
 </body>
5

@internationalcovidsu