Skip to content

Instantly share code, notes, and snippets.

@RayTwitty
Created March 25, 2025 20:51
Show Gist options
  • Save RayTwitty/94934f8db0460671d92ec739817d81b0 to your computer and use it in GitHub Desktop.
Save RayTwitty/94934f8db0460671d92ec739817d81b0 to your computer and use it in GitHub Desktop.
Реализация Tab Scroll для браузера Vivaldi.
// Vivaldi Tab Scroll
// https://forum.vivaldi.net/topic/27856/tab-scroll
// Clicking on an active tab scrolls page to top, clicking it again returns to previous scroll position.
// Credits to tam710562 from Vivaldi Forum for coming up with the sessionStorage solution, which made this possible.
// Small improvement by RayTwitty - smooth scrolling.
{
function tabScrollExit(tab) {
tab.removeEventListener('mousemove', tabScrollExit);
tab.removeEventListener('click', tabScrollTrigger);
}
function tabScrollTrigger(tab) {
chrome.scripting.executeScript({
target: {
tabId: Number(tab.parentNode.id.replace(/\D/g, ''))
},
function: tabScrollScript
})
tabScrollExit(tab);
}
function tabScroll(e, tab) {
if (tab.parentNode.classList.contains('active') && e.which === 1 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
tab.addEventListener('mousemove', tabScrollExit(tab));
tab.addEventListener('click', tabScrollTrigger(tab));
}
}
const tabScrollScript = () => {
let offset = window.pageYOffset;
let options = {
top: 0,
behavior: 'smooth'
}
if (offset > 0)
window.sessionStorage.setItem('tabOffset',offset);
else
options.top = window.sessionStorage.getItem('tabOffset') || 0;
window.scrollTo(options);
}
let appendChild = Element.prototype.appendChild;
Element.prototype.appendChild = function() {
if (arguments[0].tagName === 'DIV' && arguments[0].classList.contains('tab-header')) {
setTimeout(function() {
const trigger = event => tabScroll(event, arguments[0]);
arguments[0].addEventListener('mousedown', trigger);
}.bind(this, arguments[0]));
}
return appendChild.apply(this, arguments);
}
}
@RayTwitty
Copy link
Author

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

В C:\Users\%USERNAME%\AppData\Local\Vivaldi\Application\%VERSION%\resources\vivaldi находим файл browser.html и добавляем в тег body:

<script src="tab_scroll.js"></script>

Файл tab_scroll.js кладем рядом. Перезагружаем браузер.

У решения есть два минуса:

  • при каждом обновлении браузера придется подключать фичу заново
  • при закрытии вкладки скролл будет менять позицию, так как кнопка-крестик находится в зоне, где обрабатывается клик мыши

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment