Additional Scrolling Functions: scrollToTop, scrollOnePage, and stopScroll Javascript Functions

Had a use case for my game where I wanted to be able to force the interface to scroll to the top of the page on-demand, but by default Quest will scroll to the bottom of the page as new text is added to the screen (thanks to internal calls of the built-in JS.scrollToEnd() function).

Came across an old forum post from 2019 talking about the desire to force a scroll to the top (link), but the accepted solution seemed to simply disable the JS.scrollToEnd() function entirely, so the game never scrolls to the bottom of the page when new text appears. I didn't like that either, so I came up some custom, scrolling-based functions, bundled into a custom .js file:

// Adds a new JS.scrollToTop function that should scroll to the top of the current page
// Adds a new JS.stopScroll function that will temporarily stop the interface from scrolling to the bottom of the page when the next text is rendered.
// Adds a new JS.scrollOnePage function that will ONLY scroll down one page at a time, even if the rendered text extends beyond that.
// And overrides the existing JS.scrollToEnd function to add additional logic to account for them

var scrollToTopFlag = 0;
var stopScrollFlag = 0;
var scrollOnePageFlag = 0;
function scrollToTop() {
	scrollToTopFlag = 1;
	// May not be necessary to animate the scrolling here (rather than only in scrollToEnd), but just in case... Shouldn't hurt anything
	$('html,body').animate({ scrollTop: 0 }, 'fast');
}

function stopScroll() {
	stopScrollFlag = 1;
}

function scrollOnePage() {
	scrollOnePageFlag = 1;
}

function scrollToEnd() {
	if (!stopScrollFlag) {
		if (!scrollOnePageFlag) {
			if (!scrollToTopFlag) {
				var scrollTo = _animateScroll ? beginningOfCurrentTurnScrollPosition - 50 - $("#gamePanelSpacer").height() : $(document).height();
				var currentScrollTop = Math.max($("body").scrollTop(), $("html").scrollTop());
				if (scrollTo > currentScrollTop) {
					var maxScrollTop = $(document).height() - $(window).height();
					if (scrollTo > maxScrollTop) scrollTo = maxScrollTop;
					var distance = scrollTo - currentScrollTop;
					var duration = _animateScroll ? distance / 0.4 : 1;
					// Added by The Pixie on behalf of alexandretorres
					if (duration>2000) duration=2000;
					$("body,html").stop().animate({ scrollTop: scrollTo }, duration, "easeInOutCubic");
				}
				$("#txtCommand").focus();
				// Added by The Pixie; this is a fall back, as the above seems not to work on some browsers
				// In fact it may be the all the rest of this can deleted
				$('html,body').animate({ scrollTop: document.body.scrollHeight }, 'fast');
			}
			else {
				$('html,body').animate({ scrollTop: 0 }, 'fast');
				scrollToTopFlag = 0;
			}
		}
		else {
			var pageSize = 0.9 * ($(window).height() - $("#gamePanelSpacer").height() - $("#txtCommandDiv").height());
			var scrollPageDes = Math.max($("body").scrollTop(), $("html").scrollTop()) + pageSize
			// Use similar scroll speed to standard scrollToEnd
			var pageSpeed = _animateScroll ? pageSize / 0.5 : 1
			if (pageSpeed>2000) pageSpeed=2000;
			$('html,body').animate({ scrollTop: scrollPageDes }, pageSpeed, "easeInOutCubic");
			scrollOnePageFlag = 0;
		}
	}
	else {
		stopScrollFlag = 0;
	}
}

JS.scrollToTop() will scroll to the top of the page any time it is called, but otherwise leave the default "scroll-to-end" behavior intact for subsequent scrollToEnd calls.

JS.stopScroll() will temporarily stop Quest from scrolling to the bottom of the page for the text text that is rendered. Again, subsequent scrollToEnd calls will scroll to the bottom of the page as-normal.

JS.scrollOnePage() will make it so that the next time scrollToEnd is called, it will only scroll down a single page. Used some of mrangel's code from the 2019 forum post above for this one.

To add these to your game, save off the above code into a javascript .js file and load it into your game using the advanced options. If you don't know how to do that, I think there's a tutorial on the site here somewhere for adding custom java code.

Hope someone else can also find these useful.


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums