Мои подписки: добавление скроллбар поведения

Добавляет скроллбар, автоскролл (СКМ) и убирает "длинные" ссылки в блоке "Мои подписки"

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
Идзуми Сэна
日安装量
0
总安装量
1
评分
0 0 0
版本
0.2
创建于
2025-10-28
更新于
2025-10-29
大小
22.8 KB
许可证
暂无
适用于

Скрипт предназначен для кардинального улучшения юзабилити (usability) блока "Мои подписки" на сайте boosty.to. Оригинальный блок представляет собой длинный, не прокручиваемый список, что крайне неудобно для пользователей с большим количеством подписок.

Данный скрипт решает эту проблему путем:

  1. Принудительного добавления вертикальной полосы прокрутки с ограничением по высоте (max-height).
  2. Стилизации скроллбара, делая его более заметным (утолщенным).
  3. Реализации функции плавной автопрокрутки по нажатию средней кнопки мыши (СКМ).
  4. Исправления конфликта, при котором "длинные" ссылки мешали прокрутке и нажатию СКМ, сохраняя при этом их функциональность (открытие в новой вкладке по СКМ).

Ключевые функции

Код четко структурирован по категориям, выполняющим изолированные задачи:

  1. Внедрение стилей (GM_addStyle):

    • Создание скролл-контейнера: Ключевое CSS-правило (max-height: 90vh и overflow-y: auto !important) применяется к целевому блоку ([class*="ScrollableComponent"]), превращая его в прокручиваемую область.
    • Исправление "длинных ссылок": Применяется сложная, но необходимая техника управления событиями мыши:
      • pointer-events: none !important устанавливается на саму "длинную" ссылку (<a>).
      • pointer-events: auto !important устанавливается на дочерние элементы (аватар, имя, скидка).
    • Результат: Клик (включая СКМ) на "пустое" место внутри блока теперь регистрируется фоном (для автоскролла), в то время как клик на контент (аватар, имя) по-прежнему корректно регистрируется ссылкой.
    • Стилизация скроллбара: Скрипт делает скроллбар шире (width: 12px) и стилизует его для лучшей видимости, что отражено в комментариях к коду.
  2. Поиск элемента и запуск (MutationObserver):

    • Адаптация к SPA: Boosty является одностраничным приложением (SPA), где блок подписок может отсутствовать при первой загрузке. Скрипт использует MutationObserver для отслеживания добавления новых узлов в document.body.
    • Инициализация: Как только MutationObserver обнаруживает появление целевого блока (jsTargetSelector), он вызывает функцию findAndInitBlock, которая, в свою очередь, запускает initPan для "оживления" блока.
    • Первичный запуск: Скрипт также вызывает findAndInitBlock() один раз при старте на случай, если блок уже присутствует в DOM.
  3. Инициализация блока (initPan):

    • Эта функция добавляет к найденному блоку два критически важных обработчика событий:
    • addEventListener('wheel', ...): Перехватывает прокрутку колесом мыши. Он использует e.stopPropagation(), чтобы предотвратить прокрутку основной страницы, пока прокручивается сам блок. Прокрутка "отпускается" на основную страницу, только если блок достигает своего верхнего или нижнего предела.
    • addEventListener('mousedown', ...): Активирует автоскролл. Содержит ключевую проверку:
      • if (e.button !== 1): Реагирует только на среднюю кнопку мыши (СКМ).
      • if (e.target !== e.currentTarget): Это "умный" фильтр. Он проверяет, был ли клик совершен по самому контейнеру (фон, currentTarget) или по его дочернему элементу (аватар, имя, target). Если клик был по контенту, функция завершается (return), позволяя браузеру выполнить действие по умолчанию (открыть ссылку в новой вкладке). Автоскролл запускается только при клике на фон.
  4. Управление автоскроллом (scrollLoop, startAutoScroll, stopAutoScroll):

    • Плавность: scrollLoop использует requestAnimationFrame для обеспечения максимально плавной анимации прокрутки.
    • Нелинейное ускорение: Скорость прокрутки рассчитывается нелинейно. Она зависит от расстояния курсора от "якоря" (anchorY), нормализуется относительно высоты элемента (elemHeight) и возводится в степень (acceleration = 2.0). Это создает естественную квадратичную кривую ускорения.
    • Управление состоянием: Функции startAutoScroll и stopAutoScroll управляют флагом isAutoScrolling, добавляют и удаляют глобальные слушатели mousemove (для обновления скорости) и mousedown (для остановки по любому клику), а также переключают CSS-класс mb-autoscroll-active на body для изменения курсора.

Как использовать

  1. Перейдите на сайт boosty.to.
  2. Блок "Мои подписки" в правой колонке (если он есть) автоматически получит ограниченную высоту и кастомизированный, утолщенный скроллбар.
  3. Прокрутка колесом: Прокручивайте этот блок колесом мыши. Основная страница не будет прокручиваться, пока вы не достигнете верха или низа списка подписок.
  4. Автоскролл: Нажмите среднюю кнопку мыши (колесико) на фоне (пустом месте) блока "Мои подписки". Двигайте мышь вверх или вниз для плавной прокрутки. Нажмите любую кнопку мыши для остановки.
  5. Открытие в новой вкладке: Нажмите среднюю кнопку мыши (колесико) на аватаре или имени автора. Ссылка откроется в новой вкладке, как и ожидается.

Особенности

  • Адаптация к SPA: MutationObserver гарантирует, что скрипт сработает, даже если блок "Мои подписки" загружается динамически после основной страницы.
  • Устойчивость к CSS Modules: Использование селекторов по частичному совпадению класса ([class*="..."]) защищает скрипт от поломки при обновлениях сайта, когда меняются хэши в именах классов.
  • Продвинутая логика pointer-events: Реализовано элегантное решение "сэндвича" (none на родителе, auto на потомках), которое позволяет одновременно иметь кликабельный фон для автоскролла и кликабельный контент для ссылок.
  • "Умный" перехват СКМ: Проверка e.target !== e.currentTarget является ключевой для юзабилити. Она не "ломает" нативное поведение браузера (открытие ссылок по СКМ), а дополняет его новой функцией.
  • Нелинейная прокрутка: Расчет скорости на основе процентов от высоты и возведения в степень (Math.pow) обеспечивает более качественный и отзывчивый "опыт" (UX) автоскролла по сравнению с линейным.

Пример выходных данных

Данный скрипт не генерирует текстовых или файловых данных. Его результатом является визуальное и функциональное изменение интерфейса сайта boosty.to.

  • До: Блок "Мои подписки" представляет собой длинный список, растягивающийся на всю высоту, без полосы прокрутки.
  • После: Блок ограничен по высоте (90% высоты окна), имеет видимый, утолщенный скроллбар и поддерживает изолированную прокрутку колесом, а также плавный автоскролл по СКМ с сохранением функциональности ссылок.