☰

Smart scrolling

Prevent scrolling issues when page is resized by loading images

  1. // ==UserScript==
  2. // @name        Smart scrolling
  3. // @namespace   zeusex81@gmail.com
  4. // @description Prevent scrolling issues when page is resized by loading images
  5. // @include     *
  6. // @version     1.4
  7. // @grant       none
  8. // @run-at      document-start
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 	var hash = location.hash.replace("#", "");
  13. 	if(hash) {
  14. 		var scrollListener = function() {removeEventListener("wheel", scrollListener); hash = "";};
  15. 		addEventListener("wheel", scrollListener);
  16. 	}
  17. 	var images;
  18. 	var update = function() {
  19. 		var scrollY = 0, ready = document.readyState == "complete", elem;
  20. 		if(hash) {
  21. 			elem = document.getElementById(hash) || document.getElementsByName(hash)[0];
  22. 			if(elem) scrollY = Math.round(elem.getBoundingClientRect().top);
  23. 		} else if(document.readyState == "interactive") {
  24. 			if(!images) images = [].slice.call(document.getElementsByTagName("IMG"));
  25. 			var overflows = ["auto", "scroll"], data, rect, height;
  26. 			for(var i = 0; i < images.length; i++) {
  27. 				if(!images[i].zssData) images[i].zssData = {};
  28. 				data = images[i].zssData;
  29. 				if(ready) delete images[i].zssData;
  30. 				if(data.complete) continue;
  31. 				rect   = images[i].getBoundingClientRect();
  32. 				height = Math.max(data.height || 0, Math.round(rect.bottom - rect.top));
  33. 				if(isNaN(data.height)) {
  34. 					if(images[i].complete || !images[i].offsetParent || getComputedStyle(images[i]).position == "fixed")
  35. 						data.complete = true;
  36. 					else
  37. 						data.height = height;
  38. 				} else if(data.height != height) {
  39. 					data.complete = true;
  40. 					if(rect.top >= 0) continue;
  41. 					elem = images[i];
  42. 					while(true) {
  43. 						elem = elem.parentNode;
  44. 						if(elem == document.body) {
  45. 							scrollY += height - data.height;
  46. 							break;
  47. 						} else if(overflows.includes(getComputedStyle(elem).overflow)) {
  48. 							elem.scrollTop += height - data.height;
  49. 							break;
  50. 						}
  51. 					}
  52. 				}
  53. 			}
  54. 		}
  55. 		if(scrollY !== 0) scrollBy(0, scrollY);
  56. 		if(!ready) requestAnimationFrame(update);
  57. 	};
  58. 	update();
  59. })();