YouTube Shorts: Disable Scrolling

Disables scrolling on YouTube Shorts

  1. // ==UserScript==
  2. // @name YouTube Shorts: Disable Scrolling
  3. // @namespace https://github.com/kuronekozero/youtube-shorts-disable-scrolling
  4. // @version 0.2
  5. // @description Disables scrolling on YouTube Shorts
  6. // @icon https://github.com/kuronekozero/youtube-shorts-disable-scrolling/blob/main/logo.webp
  7. // @author Timothy (kuronek0zero)
  8. // @match https://www.youtube.com/*
  9. // @grant GM_addStyle
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 'use strict';
  15.  
  16. // Function to block events
  17. const blockEvent = (e) => {
  18. e.preventDefault();
  19. e.stopImmediatePropagation();
  20. return false;
  21. };
  22.  
  23. // Remove navigation buttons
  24. const removeNavButtons = () => {
  25. const navButtons = document.querySelectorAll(
  26. '#navigation-button-up, #navigation-button-down'
  27. );
  28. navButtons.forEach((btn) => {
  29. btn.remove();
  30. console.log("Removed:", btn.id);
  31. });
  32. };
  33.  
  34. // Disable scrolling
  35. const disableScrolling = () => {
  36. console.log("Scroll Disabled");
  37. // Disable mouse, touch, and key scrolling
  38. document.addEventListener('wheel', blockEvent, { passive: false, capture: true });
  39. document.addEventListener('touchmove', blockEvent, { passive: false, capture: true });
  40. document.addEventListener('keydown', (e) => {
  41. const keysToBlock = [
  42. 'ArrowUp', 'ArrowDown',
  43. 'ArrowLeft', 'ArrowRight',
  44. 'Space', 'PageUp', 'PageDown',
  45. 'Home', 'End', 'Tab'
  46. ];
  47. if (keysToBlock.includes(e.code)) {
  48. blockEvent(e);
  49. }
  50. }, { passive: false, capture: true });
  51.  
  52. // Disable scrollbar visibility
  53. document.documentElement.style.overflow = 'hidden';
  54. document.body.style.overflow = 'hidden';
  55. };
  56.  
  57. // Restore scrolling
  58. const enableScrolling = () => {
  59. console.log("Scroll Restored");
  60. // Remove event listeners to restore scrolling
  61. document.removeEventListener('wheel', blockEvent, true);
  62. document.removeEventListener('touchmove', blockEvent, true);
  63. document.removeEventListener('keydown', blockEvent, true);
  64.  
  65. // Reset scroll styles
  66. document.documentElement.style.overflow = '';
  67. document.body.style.overflow = '';
  68. };
  69.  
  70. // Monitor URL changes
  71. const monitorURLChange = () => {
  72. let previousURL = window.location.href;
  73.  
  74. const observer = new MutationObserver(() => {
  75. const currentURL = window.location.href;
  76.  
  77. if (currentURL !== previousURL) {
  78. if (currentURL.includes('/shorts/')) {
  79. console.log('Entered YouTube Shorts.');
  80. disableScrolling();
  81. removeNavButtons(); // Clean up navigation buttons
  82. } else {
  83. console.log('Exited YouTube Shorts.');
  84. enableScrolling(); // Restore scrolling on other pages
  85. }
  86. previousURL = currentURL; // Update current URL
  87. }
  88. });
  89.  
  90. observer.observe(document.body, { childList: true, subtree: true });
  91. };
  92.  
  93. // Initial Check + Start Monitoring
  94. const initialize = () => {
  95. if (window.location.href.includes('/shorts/')) {
  96. disableScrolling();
  97. removeNavButtons();
  98. }
  99. monitorURLChange(); // Watch for page transitions
  100. };
  101.  
  102. initialize();
  103. })();