☰

Disable YouTube Live Chat Container CSS

To Disable YouTube Live Chat Container CSS

当前为 2023-07-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Disable YouTube Live Chat Container CSS
  3. // @namespace   UserScript
  4. // @match       https://www.youtube.com/live_chat*
  5. // @grant       none
  6. // @version     0.0.7
  7. // @license     MIT
  8. // @author      CY Fung
  9. // @description To Disable YouTube Live Chat Container CSS
  10. // @run-at      document-start
  11. // ==/UserScript==
  12.  
  13. ((__CONTEXT__) => {
  14.   const addCss = () => document.head.appendChild(document.createElement('style')).textContent = `
  15.     @supports (contain: layout paint style) {
  16.  
  17.  
  18.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  19.         height: auto !important;
  20.         min-height: unset !important;
  21.       }
  22.  
  23.       #items.style-scope.yt-live-chat-item-list-renderer {
  24.         transform: translateY(0px) !important;
  25.       }
  26.  
  27.       yt-icon[icon="down_arrow"] > *,
  28.       yt-icon-button#show-more > * {
  29.         pointer-events: none !important;
  30.       }
  31.  
  32.       #item-list.style-scope.yt-live-chat-renderer[class],
  33.       #item-list.style-scope.yt-live-chat-renderer[class] *,
  34.       yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class],
  35.       yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] *
  36.       #item-list.style-scope.yt-live-chat-renderer[class] [class],
  37.       yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] [class] {
  38.         will-change: unset !important;
  39.       }
  40.  
  41.       [wSr93="hidden"]:nth-last-child(n+8) {
  42.           content-visibility: auto;
  43.           contain-intrinsic-size: auto var(--wsr94);
  44.       }
  45.  
  46.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
  47.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
  48.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
  49.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
  50.         contain: layout style;
  51.         display: inline-flex;
  52.         vertical-align: middle;
  53.       }
  54.  
  55.       #items yt-live-chat-text-message-renderer {
  56.         contain: layout style;
  57.       }
  58.  
  59.       yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
  60.         overflow-y: scroll;
  61.         padding-right: 0;
  62.       }
  63.  
  64.       body yt-live-chat-app {
  65.         contain: size layout paint style;
  66.         overflow: hidden;
  67.       }
  68.  
  69.       #items.style-scope.yt-live-chat-item-list-renderer {
  70.         contain: layout paint style;
  71.       }
  72.  
  73.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  74.         contain: style;
  75.       }
  76.  
  77.       #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  78.         contain: size style;
  79.       }
  80.  
  81.       #contents.style-scope.yt-live-chat-item-list-renderer,
  82.       #chat.style-scope.yt-live-chat-renderer,
  83.       img.style-scope.yt-img-shadow[width][height] {
  84.         contain: size layout paint style;
  85.       }
  86.  
  87.       .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
  88.       .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
  89.         contain: layout paint style;
  90.       }
  91.  
  92.       yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  93.       yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
  94.       yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  95.       yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
  96.         contain: layout style;
  97.       }
  98.  
  99.       tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
  100.         contain: layout paint style;
  101.       }
  102.  
  103.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  104.         position: relative !important;
  105.         height: auto !important;
  106.       }
  107.  
  108.       #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
  109.         position: static !important;
  110.       }
  111.  
  112.     }
  113.  
  114.   `;
  115.  
  116.   const { Promise, requestAnimationFrame } = __CONTEXT__;
  117.  
  118.   let done = 0;
  119.   let main = async () => {
  120.  
  121.     if (done) return;
  122.     let m1, m2;
  123.  
  124.     let maxN = 8;
  125.  
  126.     while (!m1 || !m2) {
  127.       if (--maxN < 0) return;
  128.       m1 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer');
  129.       m2 = document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer');
  130.       if (m1 && m2) break;
  131.       await new Promise(resolve => requestAnimationFrame(resolve));
  132.     }
  133.     done = 1;
  134.  
  135.     addCss();
  136.  
  137.     const dummy = {
  138.       transform: '',
  139.       height: '',
  140.       maxHeight: ''
  141.     };
  142.  
  143.     Object.defineProperty(m1, 'style', { get() { return dummy }, set() { }, });
  144.     Object.defineProperty(m2, 'style', { get() { return dummy }, set() { }, });
  145.     m1.setAttribute("style", "");
  146.     m2.setAttribute("style", "");
  147.  
  148.     let p1 = 0;
  149.     document.addEventListener('click', (evt) => {
  150.       if (!evt.isTrusted) return;
  151.       const target = ((evt || 0).target || 0)
  152.       if (target.id === 'show-more') {
  153.         if (target.nodeName.toLowerCase() !== 'yt-icon-button') return;
  154.  
  155.         if (Date.now() - p1 < 80) return;
  156.         requestAnimationFrame(() => {
  157.           p1 = Date.now();
  158.           target.click();
  159.         })
  160.       }
  161.  
  162.     })
  163.  
  164.     const items = m2;
  165.  
  166.     const visObserver = new IntersectionObserver((entries)=>{
  167.  
  168.       for(const entry of entries){
  169.  
  170.         const target = entry.target;
  171.         if(!target) continue;
  172.         if ( entry.isIntersecting === true ){
  173.            target.style.setProperty('--wsr94',  entry.boundingClientRect.height+'px');
  174.            target.setAttribute('wSr93', 'visible');
  175.  
  176.         }
  177.         else {
  178.            target.style.setProperty('--wsr94',  entry.boundingClientRect.height+'px');
  179.           target.setAttribute('wSr93', 'hidden');
  180.         }
  181.  
  182.       }
  183.  
  184.  
  185.  
  186.     }, {
  187.       /*
  188.   root: items,
  189.   rootMargin: "0px",
  190.   threshold: 1.0,
  191.   */
  192. });
  193.  
  194.     const mutObserver = new MutationObserver((mutations)=>{
  195.       let node = items.lastElementChild;
  196.       for(;node !== null; node = node.previousElementSibling){
  197.         if( node.hasAttribute('wSr93') )break;
  198.         node.setAttribute('wSr93','');
  199.         visObserver.observe(node);
  200.       }
  201.  
  202.     });
  203.     mutObserver.observe(m2, {
  204.       childList: true,
  205.       subtree: false
  206.     });
  207.  
  208.  
  209.  
  210.   };
  211.  
  212.   main();
  213.  
  214.  
  215.  
  216.   function onReady() {
  217.  
  218.     main();
  219.   }
  220.  
  221.  
  222.  
  223.   if (document.readyState != 'loading') {
  224.     onReady();
  225.   } else {
  226.     window.addEventListener("DOMContentLoaded", onReady, false);
  227.   }
  228.  
  229.  
  230. })({ Promise, requestAnimationFrame });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址