Jak na to – Skrýt posuvník
Přečtěte si, jak skrýt posuvníky pomocí CSS.
Jak skrýt posuvníky
Přidat overflow: hidden;
, chcete-li skrýt vodorovný i svislý posuvník.
Příklad
body {
overflow: hidden; /* Hide scrollbars */
}
Chcete-li skrýt pouze svislý posuvník nebo pouze vodorovný posuvník, použijte overflow-y
nebo overflow-x
:
Příklad
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Všimněte si, že overflow: hidden
to také odebere funkce posuvníku. Uvnitř stránky není možné rolovat.
Tip: Chcete-li se o této vlastnosti dozvědět více overflow
, přejděte do našeho výukového programu CSS Overflow nebo CSS Overflow Property Reference .
Skrýt posuvníky, ale zachovat funkčnost
Chcete-li skrýt posuvníky, ale stále se posouvat, můžete použít následující kód:
Příklad
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Prohlížeče Webkit, jako je Chrome, Safari a Opera, podporují nestandardní ::-webkit-scrollbar
pseudo prvek, který nám umožňuje upravit vzhled posuvníku prohlížeče. IE a Edge tuto vlastnost podporují -ms-overflow-style:
a Firefox podporuje scrollbar-width
vlastnost, která nám umožňuje skrýt posuvník, ale zachovat funkčnost.