New: Scroll by screen percentage in webtoon mode

Author: ollm

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Option to save bookmarked images [`7def9ec`](https://github.com/ollm/OpenComic/commit/7def9eca58ceb24fb3444a3daf3ed81178a13fd1)
 - Improved opening behavior options for files and folders [`07ee1f5`](https://github.com/ollm/OpenComic/commit/07ee1f5007576016a709e45d4649319129f75911)
 - Make the Ignore single folders option work for images too [`cc9f9c7`](https://github.com/ollm/OpenComic/commit/cc9f9c727ec11b1a12fd4c8dac90506f7e01b378)
+- Scroll by screen percentage in webtoon mode
 
 ##### 🐛 Bug Fixes
 

scripts/reading.js

@@ -1136,6 +1136,46 @@ function calculateRealReadingDirection(index)
 		realReadingDirection = true;
 }
 
+goScrollPercentST = false;
+
+function goScrollPercent(screenPercent = 50, animation = true)
+{
+	if(_config.readingWebtoon || readingViewIs('scroll'))
+	{
+		let animationDurationMS = (animation ? _config.readingViewSpeed : 0) * 1000;
+
+		const content = template._contentRight().firstElementChild;
+		const rect = content.getBoundingClientRect();
+
+		const now = Date.now();
+		const prevNow = +content.dataset.now;
+
+		if(now - prevNow < animationDurationMS)
+			animationDurationMS = (now - prevNow);
+
+		const scrollHeight = content.scrollHeight - rect.height;
+		let scrollTop = (+content.dataset.scrollTop || content.scrollTop) + (screenPercent / 100 * rect.height);
+
+		if(scrollTop < 0)
+			scrollTop = 0;
+		else if(scrollTop > scrollHeight)
+			scrollTop = scrollHeight;
+
+		content.dataset.scrollTop = scrollTop;
+		content.dataset.now = now;
+
+		clearTimeout(goScrollPercentST);
+		goScrollPercentST = setTimeout(function(){
+
+			content.dataset.scrollTop = '';
+			content.dataset.now = '';
+
+		}, animationDurationMS);
+
+		$(content).stop(true).animate({scrollTop: scrollTop+'px'}, animationDurationMS);
+	}
+}
+
 //Go to a specific comic index
 function goToIndex(index, animation = true, nextPrevious = false, end = false)
 {
@@ -1380,8 +1420,15 @@ function goNext()
 	}
 	else if(nextIndex <= indexNum || ((readingViewIs('scroll') && (_config.readingViewAdjustToWidth || _config.readingWebtoon)) && currentPageVisibility < maxPageVisibility))
 	{
-		goToIndex(nextIndex, true, true);
-		music.soundEffect.page();
+		if(_config.readingWebtoon)
+		{
+			goScrollPercent(70, true);
+		}
+		else
+		{
+			goToIndex(nextIndex, true, true);
+			music.soundEffect.page();
+		}
 	}
 	else if(currentIndex == indexNum && dom.nextComic() && (!_config.readingManga || readingViewIs('scroll')))
 	{
@@ -1408,8 +1455,15 @@ function goPrevious()
 	}
 	else if(previousIndex > 0 || ((readingViewIs('scroll') && (_config.readingViewAdjustToWidth || _config.readingWebtoon)) && currentPageVisibility > 0))
 	{
-		goToIndex(previousIndex, true, true);
-		music.soundEffect.page();
+		if(_config.readingWebtoon)
+		{
+			goScrollPercent(-70, true);
+		}
+		else
+		{
+			goToIndex(previousIndex, true, true);
+			music.soundEffect.page();
+		}
 	}
 	else if(previousIndex == 0 && dom.previousComic() && (!_config.readingManga || readingViewIs('scroll')))
 	{