Scroll TabNavigation Left/Right

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<main>
	<div id="tabNav" class="tab-nav scroll-hide svelte-1uw5tnk" role="tablist" style="">
		<div id="wrapper">
			<button role="tab" class="btn btn-sm selected">Canny Edge</button>
			<button role="tab" class="btn btn-sm">HED Edge</button>
			<button role="tab" class="btn btn-sm">Pidi Edge</button>
			<button role="tab" class="btn btn-sm">MLSD Edge</button>
			<button role="tab" class="btn btn-sm">MIDAS Depth</button>
			<button role="tab" class="btn btn-sm">ZOE Depth</button>
			<button role="tab" class="btn btn-sm">Normal Bae</button>
			<button role="tab" class="btn btn-sm">DWPose</button>
			<button role="tab" class="btn btn-sm">Openpose</button>
			<button role="tab" class="btn btn-sm">Lineart</button>
			<button role="tab" class="btn btn-sm">InPaint</button>
			<button role="tab" class="btn btn-sm">Content Shuffle</button>
			<button role="tab" class="btn btn-sm">Color Shuffle</button>
		</div>
	</div>
</main>

CSS

body {
	display: flex;
	justify-content: center;
	align-items: start;
	background: hsl(var(--ctp-mocha-crust-hsl));

	& main {
		margin-top: 80px;
		padding: 20px;
		height: auto;
		border-radius: 0.2rem;
		background: var(--ctp-mocha-base);
	}

	& #tabNav {
		position: relative;
		width: 500px;
		overflow-x: hidden;
		display: block;
		height: auto;
		padding-top: 8px;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		& > div#wrapper {
			display: inline-block;
			scroll-snap-type: y mandatory;

			/*width: 2000px;*/

			& button {
				scroll-snap-align: start;
				display: inline-block;
				min-width: 75px;
				width: auto;
				max-width: 140px;
				text-align: center;
				background: rgb(var(--ctp-mocha-red-rgb) / 40%);
				color: var(--ctp-mocha-base);
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;

				&.selected {
					background: var(--ctp-mocha-red);
				}
			}
		}
	}
}

JavaScript

function setWrapperWidth() {
	const wrapper = document.getElementById("wrapper");
	const buttons = wrapper.children;

	let totalWidth = 0;

	// Berechne die Gesamtbreite aller Buttons
	for (let i = 0; i < buttons.length; i++) {
		const button = buttons[i];
		const buttonWidth = button.offsetWidth + 5;
		totalWidth += buttonWidth;
	}

	// Setze die Breite des Wrappers auf die Gesamtbreite aller Buttons
	wrapper.style.width = `${totalWidth}px`;
}

// Rufe die Funktion auf, wenn die Seite geladen ist
document.addEventListener("DOMContentLoaded", setWrapperWidth);

const body = document.querySelector("body");
const tabNav = document.querySelector("#tabNav");
const tabNav2 = document.querySelector("#tabNav2");

tabNav.addEventListener("wheel", (event) => {
	event.preventDefault();
	if (event.deltaY < 0) {
		if (tabNav.scrollLeft > 0) {
			//tabNav.scrollLeft -= 25
			tabNav.scrollLeft += event.deltaY / 2;
		}
	}
	if (event.deltaY > 0) {
		if (tabNav.scrollWidth > tabNav.clientWidth) {
			//tabNav.scrollLeft += 25
			tabNav.scrollLeft += event.deltaY / 2;
		}
	}
});

// fetch Catppuccin Mocha CSS Vars from rentry.co/ctp-mocha-css-vars
// and add each to the Document Body
fetch("https://rentry.co/ctp-mocha-css-vars")
	.then(function (response) {
		return response.text();
	})
	.then(function (html) {
		let parser = new DOMParser();
		let doc = parser.parseFromString(html, "text/html");
		// Get the image file
		let css = doc.querySelector("article > div > p");
		css = css.textContent.split("\n");
		css.forEach((_) => {
			let cssSplit = _.split(":");
			let css_properity = cssSplit[0];
			let css_value = cssSplit[1].replace(";", "");
			body.style.setProperty(css_properity, css_value);
			//console.log("Properity: " + css_properity + " Value: " + css_value)
		});
	})
	.catch(function (err) {
		console.warn("Something went wrong.", err);
	});
	
fetch("https://rentry.co/html-css-js-test")
	.then(function (response) {
		return response.text();
	})
	.then(function (html)...