Currently scrollbars in LiveCode text fields are drawn using the Motif theme on Web standalones.

So suppose you have a text field that has a vertical scrollbar. This is how it looks in the LiveCode IDE (on MacOS):

And this is how it looks on a Web standalone:

The Motif scrollbar is a bit ugly :)

In the future this will change to use a native theme instead. But until then, we could use the do .. as "javascript" command to implement a prettier solution.

What we will do is to hide the scrollbar on the Web standalone, and allow scrolling the field using the trackpad or the mouse wheel instead.

I have added a second card to my stack, that will hold the JavaScript code. The JavaScript code lives in field "myJS" of card "scriptsJS" of stack "WebScroll":

document.getElementById("canvas").addEventListener("wheel", function(event) {
			event.preventDefault();
			var myStack = document.liveCode.findStackWithName("WebScroll");
			if (myStack) {
				myStack.scrollEvent(event.deltaX, event.deltaY);
			}
		});

This code listens for the "wheel" event (that fires when you scroll using the trackpad or the mouse wheel), and instead of scrolling the webpage, it sends a message named "scrollEvent" to stack "WebScroll".

In our stack code, we have to do 4 steps:

- Set the cJavascriptHandlers custom property of the stack to the name of the message that is sent to the LiveCode stack by the JavaScript code:

set the cJavascriptHandlers of stack "WebScroll" to "scrollEvent"

- do <the script above> as "javascript":

local tJS
put field "myJS" of card "scriptsJS" of me into tJS
do tJS as "javascript"

- hide the vertical scrollbar of the field if we are on a Web standalone:

if the platform is "web" then
   set the vScrollbar of field "myField" of me to false
end if

- handle the scrollEvent message to update the vscroll of the field:

on scrollEvent pHScroll, pVScroll
   /* Sent via JS. If the scroll targets field myField, then update. */
   if there is a field "myField" of me and \
         the mouseLoc is within the rect of field "myField" of me then
      set the vscroll of field "myField" of me to \
            the vScroll of field "myField" of me + pVScroll
   end if
end scrollEvent

So, putting everything together, you have to add this to your stack script:

on preOpenStack
   if the platform is "web" then
      set the cJavascriptHandlers of me to "scrollEvent"
      set the vScrollbar of field "myField" of me to false
      local tJS
      put field "myJS" of card "scriptsJS" of me into tJS
      do tJS as "javascript"
   end if
end preOpenStack
on scrollEvent pHScroll, pVScroll
   /* Sent via JS. If the scroll targets field myField, then update. */
   if there is a field "myField" of me and \
         the mouseLoc is within the rect of field "myField" of me then
      set the vscroll of field "myField" of me to \
            the vScroll of field "myField" of me + pVScroll
   end if
end scrollEvent

and also to add a second card that will hold the JavaScript code.

After that, this is how your Web standalone will look, and it will still be possible to scroll the text field:

Note: An alternative to having a separate card that will hold the JavaScript code, and doing do tJS as "javascript", is to add the javascript code directly in your custom standalone.html file, if you have one. It has to be added in a <script> tag:

<script>
		document.getElementById("canvas").addEventListener("wheel", function(event) {
			event.preventDefault();
			var myStack = document.liveCode.findStackWithName("WebScroll");
			if (myStack) {
				myStack.scrollEvent(event.deltaX,event.deltaY);
			}
		});
</script>