Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać własny pasek przewijania do dowolnego elementu w WordPress?

Czy twoja witryna WordPress wygląda niechlujnie? Czy masz długie menu, duże panele boczne lub treści, które nie są dobrze dopasowane? Własny pasek przewijania może pomóc poprawić te problemy.

Niestety, nie jest łatwo znaleźć prostą wtyczkę do tego celu. Niektóre inne przewodniki sugerują również użycie kodu, ale może to być przerażające, jeśli jesteś nowy. Ale nie musi tak być.

Zbudowaliśmy setki witryn internetowych, w tym dla naszych własnych marek, więc wiemy, jak szybko, sprawnie i łatwo dodawać paski przewijania.

W tym przewodniku pokażemy, jak dodać własny pasek przewijania do dowolnej części twojej witryny za pomocą kreatora stron. Jeśli nie odpowiada to twoim potrzebom, możesz zapoznać się z naszą przyjazną dla początkujących metodą dodawania własnego paska przewijania za pomocą CSS.

How to Add a Custom Scrollbar to Any Element in WordPress

Kiedy dodać pasek przewijania do określonych elementów na twojej witrynie WordPress?

Dodanie paska przewijania dla elementów WordPressa może znacznie poprawić wrażenia użytkownika twojej witryny. Ale kiedy należy korzystać z tej funkcji?

Załóżmy, że prowadzisz bloga o modzie z wieloma kategoriami. Twoje menu główne może zawierać listę rozwijaną „Odzież” z ponad 20 podkategoriami. Bez paska przewijania to menu może rozciągać się na całą twoją stronę, spychając inne treści z pola widzenia.

A jeśli masz dużo treści na twoim panelu bocznym, czasami może być trudno wybrać, które z nich wyeliminować. Posiadanie paska przewijania dla długiego widżetu paska bocznego może rozwiązać ten problem.

An example of a scrollbar in a sidebar

Inne przypadki użycia obejmują długie, szczegółowe opisy na stronach produktów, sekcje komentarzy z setkami komentarzy lub galerię obrazków z ograniczoną ilością miejsca.

Mając to na uwadze, pokażemy ci dwie opcje dodania własnego paska przewijania do dowolnego elementu na twojej witrynie internetowej WordPress.

Zalecamy wybranie opcji 1, jeśli dopiero zaczynasz swoją witrynę i chcesz korzystać z konfiguratora stron z własną funkcją paska przewijania. Wynika to z faktu, że jeśli korzystałeś już z innego motywu, będziesz musiał zmienić swój motyw dla tej metody.

Z drugiej strony, jeśli podoba ci się twój obecny, aktualny motyw, możesz wybrać opcję 2, aby dodać własny pasek przewijania za pomocą kodu CSS. Nie martw się, podzielimy ten proces krok po kroku, aby każdy mógł go łatwo śledzić.

Możesz skorzystać z poniższych odnośników, aby przejść do Twojej preferowanej metody:

Uwaga: Czy zamiast tego chcesz zmienić pasek przewijania całej witryny internetowej WordPress? W takim razie zapoznaj się z naszym przewodnikiem na temat dodawania własnego paska przewijania w WordPress.

Metoda 1: Użycie Thrive Architect do dodania własnego paska przewijania (bez kodu)

Jednym ze sposobów dodania własnego paska przewijania w określonym elemencie jest użycie konfiguratora stron z funkcją paska przewijania. W ten sposób można łatwo dostosować pasek przewijania bez dotykania jakiegokolwiek kodu.

W tej metodzie wykorzystamy Thrive Architect. Oprócz funkcji paska przewijania, Thrive Architect posiada ponad 300 szablonów do szybkiego tworzenia profesjonalnie wyglądających stron i dynamicznych treści, które spersonalizują doświadczenia twoich odwiedzających.

Interfejs „przeciągnij i upuść” jest przyjazny dla użytkownika, dzięki czemu jest idealny dla osób początkujących w WordPress. Aby uzyskać bardziej szczegółowe informacje na temat tego narzędzia, zapoznaj się z naszą recenzją Thrive Architect.

Chociaż Thrive Architect nie oferuje darmowej wersji, możesz skorzystać z naszego specjalnego kodu rabatowego Thrive Themes, aby zaoszczędzić do 50% na początkowym zakupie.

Krok 1: Konfiguracja Thrive Architect i motywów Thrive

Aby rozpocząć, musimy zainstalować wtyczkę Thrive Architect. Dostęp do niej można uzyskać logując się na twoje konto na witrynie internetowej Thrive Themes.

Następnie pobierz i zainstaluj wtyczkę Thrive Product Manager. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczek WordPress dla początkujących.

Install Thrive Product Manager

Po włączaniu wtyczki przejdź do Menedżera produktów w twoim kokpicie WordPress.

Kliknij „Zaloguj się na moje konto”, aby odnośnik do Twojej witryny WordPress został połączony z Twoim kontem Thrive Themes.

Log into your Thrive Themes account

Powinieneś teraz zobaczyć listę produktów Thrive Themes dostępnych na twoim koncie.

Znajdź „Thrive Architect” i zaznacz pole „Zainstaluj produkt”.

Installing Thrive Architect

Przewiń w dół, aby znaleźć„Thrive Theme Builder” i wybierz opcję „Zainstaluj motyw”.

Następnie kliknij „Zainstaluj wybrane produkty”. Ten krok jest konieczny, ponieważ Thrive Architect współpracuje z Thrive Theme Builder.

Installing the Thrive Theme Builder

Następny ekran pokaże Thrive Product Manager instalujący i włączający Thrive Theme Builder.

Po zakończeniu wybierz opcję „Przejdź do kokpitu twórcy motywu”.

Activating Thrive Architect and Thrive Theme Builder

Teraz nadszedł czas, aby wybrać podstawowy projekt dla twojej witryny, korzystając z biblioteki motywów Thrives.

Jeśli nie masz pewności, który motyw wybrać, użyj przycisku „Podgląd”, aby zobaczyć, jak wygląda każdy z nich. Po podjęciu decyzji kliknij „Wybierz”.

Choosing a Thrive Theme Builder theme

Teraz wpiszesz Kreator tworzenia motywu.

Ten kreator poprowadzi cię przez proces wgrywania twojego logo, wybierania kolorów marki dla twojego motywu oraz konfigurowania różnych struktur i szablonów motywów.

Upewnij się, że ukończyłeś kreatora konfiguracji przed przejściem do następnego kroku.

Thrive Theme Builder's setup wizard

Krok 2: Dodaj element treści do twojego motywu

Dodajmy teraz element treści do twojego motywu WordPress, który domyślnie posiada funkcję paska przewijania.

W Thrive Themes treść jest blokiem, którego można użyć jako kontenera do grupowania wielu bloków. Może to być przydatne, jeśli chcesz, aby zestaw elementów był stylizowany w ten sam sposób lub zarządzany jako grupa.

W tym przykładzie dodamy treść zawierającą długą listę wpisów na blogu. W tym scenariuszu chcemy mieć możliwość wyświetlania wszystkich kategorii na panelu bocznym bez nadmiernego wydłużania go.

Najpierw przejdź na dowolną stronę lub wpis na twoim blogu WordPress, na którym chcesz mieć pasek przewijania.

Następnie na górnym pasku narzędzi administratora kliknij „Edytuj szablon motywu [nazwa]” lub „Edytuj za pomocą Thrive”.

Editing a WordPress website with Thrive Architect

Powinieneś teraz przejść do interfejsu edycji Thrive Architect. Aby dodać blok treści, kliknij znak „+” po prawej stronie i wybierz element „Content Box”.

Następnie przeciągnij i upuść go w dowolnym miejscu, w którym chcesz umieścić element z paskiem przewijania.

Adding a Content Box element in Thrive Architect

Możesz teraz dodać więcej elementów treści do pola treści. Na przykład możesz ponownie kliknąć znak „+” i dodać do niego blok „Tekst”. Następnie możesz wpisać w nim dowolny rodzaj tekstu.

Thrive Themes oferuje mnóstwo elementów wizualnych, od podstawowych, takich jak tekst i obrazki, po formularze i tabele cenowe.

Adding a Text box element in Thrive Architect

Ponieważ chcemy dodać listę kategorii do panelu bocznego, dodamy również element „Dynamic Styled List” do pola treści.

Ten blok zasadniczo pobiera dane z twojej witryny internetowej, aby dynamicznie wyświetlać listę, taką jak kategorie, tagi lub autorzy. Blok będzie się automatycznie aktualizował w miarę rozwoju twojej witryny internetowej.

Adding a Dynamic Styled List element in Thrive Architect

Po przeciągnięciu i upuszczeniu listy dynamicznej do pola treści, kliknij przycisk „Wybierz rodzaj listy”.

Następnie kliknij „Lista kategorii”.

Choosing a list type to display in Thrive Architect

Teraz twoja lista kategorii, blok tekstowy i wszelkie inne elementy dodane do pola treści znajdują się w tym samym kontenerze.

Jak widać, lista jest dość długa, dlatego chcemy dodać do niej pasek przewijania.

Krok 3: Włącz pasek przewijania w polu treści

Jeśli wybierzesz ten kontener i klikniesz na niebieską strzałkę po lewej stronie, zobaczysz wiele opcji pozwalających na dostosowanie twojej treści.

Configuring the Content Box settings in Thrive Architect

Ustawienia umożliwiające dodanie paska przewijania znajdują się na karcie „Układ i pozycja”. W tym miejscu można dostosować dopełnienie, margines, szerokość, wysokość, wyrównanie i tak dalej.

Pierwszą rzeczą, którą zrobiliśmy, było kliknięcie białej strzałki wewnątrz niebieskiego obszaru dopełnienia, tuż pod sekcją „Marginesy i dopełnienie”. Zrobiliśmy to tylko po to, aby upewnić się, że panel boczny z treścią jest wyrównany z resztą elementów.

Zachęcamy do zapoznania się z innymi opcjami, aby upewnić się, że twój box wygląda proporcjonalnie.

Opening the Layout and Position menu in Thrive Architect

Następnie przewińmy w dół do sekcji Wysokość. Kliknij przycisk „Max” i zmień wysokość w pikselach na znacznie mniejszą. W tym przypadku przeszliśmy z 617px do 300px.

Spowoduje to znaczne skrócenie pola treści i zniknięcie nazw kategorii w dolnej sekcji.

Setting a max height for the Content Box in Thrive Architect

Po wykonaniu tej czynności ponownie przesuń panel w dół i otwórz kartę „Zaawansowane”. Następnie wybierz „Przewijanie” w ustawieniach przepełnienia i włącz opcję „Stylowy pasek przewijania”.

Pasek przewijania powinien zostać automatycznie dodany do twojego bloku treści.

Enabling the custom scrollbar in Thrive Architect

To wszystko, jeśli chodzi o dodawanie własnego paska przewijania za pomocą Thrive Architect. Możesz kontynuować edycję twojego motywu WordPress, strony lub wpisu lub kliknąć „Zapisz pracę” na dole, aby opublikować zmiany.

Oto jak wygląda nasz scrollbar na witrynie demonstracyjnej:

Thrive Architect's custom scrollbar example

Metoda 2: Wykorzystanie kodu CSS do stworzenia własnego paska przewijania

Jeśli zmiana twojego motywu WordPress i użycie konfiguratora stron w celu utworzenia własnego paska przewijania to za dużo, możesz zamiast tego użyć kodu CSS. Ta metoda pozwala dostosować pasek przewijania bezpośrednio na twojej stronie WordPress.

Nie martw się, jeśli dopiero zaczynasz pracę z fragmentami kodu. Przeprowadzimy cię przez ten proces krok po kroku, ułatwiając włączanie tej funkcji na twojej witrynie WordPress.

Najpierw zrozummy, jak działa CSS. CSS to skrót od Cascading Style Sheets (kaskadowe arkusze stylów). Jest to język, który mówi przeglądarkom internetowym, jak wyświetlać elementy na stronie internetowej. W naszym przypadku użyjemy CSS do dodania i stylizacji własnego paska przewijania.

Aby użyć własnego CSS, potrzebujemy dwóch rzeczy:

  1. Klasa CSS: To jest jak tag nazwy dla elementu na twojej stronie. Dodajemy ją do elementu, który chcemy zmienić.
  2. Kod CSS: Jest to zestaw instrukcji, który mówi przeglądarce, jak stylizować element za pomocą klasy CSS.

Tak więc, aby dodać własny pasek przewijania, najpierw nadamy klasę CSS elementowi, który chcemy zmienić. Następnie dodamy kod CSS, który utworzy pasek przewijania dla elementów z tą klasą.

Dodasz klasę CSS scroll-bar do twojego elementu. Poniżej pokażemy, jak to zrobić. A to jest pełny fragment kodu CSS, który doda pasek przewijania:

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

Krok 1: Dodaj klasę CSS do twojego elementu

Istnieje kilka sposobów na dodanie klasy CSS do elementu na twojej witrynie WordPress.

Jeśli jesteś w edytorze bloków lub edytorze całej witryny, możesz po prostu kliknąć dowolny blok na twojej stronie, wpisie lub szablonie motywu bloku. Następnie na panelu bocznym ustawień bloku otwórz kartę „Zaawansowane” i wstaw twoją klasę CSS w polu „Dodatkowe klasy CSS”.

Po zakończeniu kliknij przycisk Aktualizuj, Publikuj lub Zapisz.

Adding a CSS class in the full-site editor

Jeśli korzystasz z klasycznego motywu, proces ten działa również w przypadku edytora widżetów opartego na blokach. Przejdź do Wygląd ” Widżety i kliknij dowolny blok, do którego chcesz dodać klasę CSS.

Następnie zobaczysz tę samą kartę Zaawansowane na panelu bocznym ustawień bloku. Wystarczy wpisz klasę CSS w polu „Dodatkowe klasy CSS”, tak jak wcześniej.

Adding a CSS class in the widget editor

Krok 2: Dodaj kod CSS do twojego motywu

Teraz przejdźmy dalej i dodajmy nasz własny kod CSS. Pokażemy ci 3 sposoby, aby to zrobić: za pomocą konfiguratora motywu, edytora na całej witrynie i WPCode.

Pierwsza opcja jest przeznaczona dla użytkowników klasycznych motywów. Ponadto jest to funkcja wbudowana, więc nie potrzebujesz wtyczki, aby wstawić kod lub nawet otworzyć pliki twojego motywu.

Aby to zrobić, możesz otworzyć konfigurator motywu WordPress, przechodząc do Wygląd ” Dostosuj.

Launch WordPress theme customizer

Uwaga: Jeśli nie widzisz tego ustawienia na twoim WordPressie, to prawdopodobnie używasz motywu blokowego i zamiast tego możesz użyć następnej metody. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat poprawki brakującego konfiguratora motywów w WordPress.

Metoda 1: Dodawanie CSS do klasycznych motywów

Wewnątrz konfiguratora znajdź i kliknij „Dodatkowy CSS”.

Opening the Additional CSS tab in Theme Customizer

Tutaj wystarczy wkleić kod, który pokazaliśmy wcześniej.

Po dodaniu kodu automatycznie zobaczysz zmiany w twoim motywie.

Creating a scrollbar in a classic theme with CSS

Jak widać, element, do którego dodano klasę CSS, ma teraz pasek przewijania. Następnie możesz po prostu kliknąć „Opublikuj”.

Metoda 2: Dodawanie CSS za pomocą edytora całej witryny

Jeśli masz motyw blokowy, będziesz musiał dodać kod CSS za pomocą edytora całej witryny, a następnie po prostu przejść do Wygląd „ Edytor.

Selecting the Full-Site Editor from the WordPress admin panel

Znajdziesz tu kilka opcji menu, dzięki którym dostosujesz swój własny motyw blokowy.

Tutaj kliknij „Style”.

Opening the Styles menu in Full Site Editor

Na tej stronie powinno znajdować się kilka motywów blokowych do wyboru.

Zignorujemy to i klikniemy przycisk „Edytuj”. Ma on kształt ołówka.

Clicking the Edit Styles button in the Full Site Editor

Znajdujesz się teraz w interfejsie edycji.

W prawym panelu kliknij menu z trzema kropkami obok ikonki wersji i wybierz „Dodatkowy CSS”.

Opening the Additional CSS menu in full-site editor

Teraz wystarczy wkleić fragment kodu z wcześniej. Twoje zmiany powinny pojawić się automatycznie.

Po zakończeniu kliknij „Zapisz”.

Inserting custom CSS in full-site editor

Jedną z wad korzystania z konfiguratora motywu i edytora pełnej witryny do wstawienia własnego kodu CSS jest to, że jeśli zdecydujesz się zaktualizować lub zmienić swój motyw, możesz ryzykować utratę dostosowanego kodu CSS.

Dlatego zalecamy korzystanie z WPCode do edycji CSS twojej witryny, zwłaszcza jeśli korzystasz z edytora całej witryny i motywu opartego na blokach. Możesz postępować zgodnie z poniższą metodą, która będzie działać również z klasycznymi motywami.

Metoda 3: Dodawanie CSS za pomocą WPCode

Jeśli boisz się konfigurować swoją witrynę za pomocą kodu, WPCode jest idealnym rozwiązaniem dla Ciebie. Ta wtyczka fragmentu kodu umożliwia bezpieczne wstawienie własnego kodu, ponieważ nie będziesz musiał bezpośrednio wchodzić w interakcje z plikami twojego motywu.

Jeśli wystąpi błąd, WPCode automatycznie wykryje i wyłączy kod, który powoduje problem. W ten sposób szansa na uszkodzenie twojej witryny jest minimalna.

Najpierw zainstaluj wtyczkę WPCode na twojej witrynie internetowej. Możesz przeczytać nasz przewodnik dla początkujących, jak zainstalować wtyczkę WordPress, aby uzyskać więcej informacji.

Następnie przejdź do sekcji Fragmenty kodu „ + Dodaj fragment kodu w twoim kokpicie WordPress. Wybierz „Add Your Custom Code (New Snippet)” i kliknij „+ Add Custom Snippet”.

Adding a new custom code snippet in WPCode

Teraz nadaj swojemu nowemu fragmentowi kodu nazwę. Może to być coś prostego, jak „CSS Scrollbar”.

Następnie zmień fragment kodu na „CSS Snippet”.

Inserting custom CSS to create a scrollbar in WPCode

W oknie podglądu kodu wklej fragment kodu, który pokazaliśmy wcześniej.

Po zakończeniu przewiń stronę w dół do sekcji „Wstaw”. Tam upewnij się, że Metoda wstawienia to „Automatyczne wstawianie”, a Lokalizacja to „Nagłówek całej witryny”.

Po wykonaniu tej czynności wystarczy przełączyć przycisk w prawym górnym rogu tak, aby był włączony i kliknąć „Zapisz fragment kodu”.

Choosing Site Wide Header as the code location in WPCode

Powinieneś teraz zobaczyć pasek przewijania na elemencie, do którego dodałeś klasę CSS.

Oto przykład dodania paska przewijania do listy ostatnich wpisów:

Example of a scrollbar made with CSS

Jak dodać własny pasek przewijania do pozycji menu z wieloma podmenu?

Jedną z rzeczy, które ciekawią czytelników jest to, jak dodać pasek przewijania do twojego elementu menu nawigacyjnego, który ma długą listę podmenu.

Proces ten jest w rzeczywistości bardzo podobny do tego, który właśnie pokazaliśmy. Istnieją jednak pewne drobne modyfikacje tu i tam, w zależności od używanego motywu.

Jeśli używasz klasycznego motywu, powinieneś dodać klasę paska przewijania tylko do twojego głównego elementu menu. Nie musisz dodawać jej do twojego podmenu.

Aby dodać klasę CSS do twojego menu, możesz otworzyć konfigurator motywu.

Następnie kliknij przycisk „Menu”.

Selecting Menus in Theme Customizer

Następnie kliknij ikonę koła zębatego „Ustawienia”, a następnie wybierz „Klasy CSS”.

Umożliwia to dodanie klasy CSS do każdej pozycji menu.

Adding CSS classes to menu items

Teraz przesuń panel boczny w dół.

Następnie otwórz twoje menu główne.

Selecting the primary menu in Theme Customizer

Na tym etapie możesz wybrać pozycję menu, do której chcesz dodać klasę CSS i kliknąć, aby ją rozwinąć.

Powinno tam znajdować się pole o nazwie „Klasy CSS”, do którego można dodać klasę.

Adding a CSS class to menu item in WordPress theme customizer

Poza tym upewnij się, że dodajesz klasę podmenu po każdej wzmiance o klasie paska przewijania w twoim kodzie CSS, na przykład w ten sposób:

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Oto jak powinno wyglądać menu nawigacyjne:

Adding a scrollbar to a menu in WordPress theme customizer

Ta sama zasada dotyczy motywów blokowych.

Wystarczy dodać klasę paska przewijania do twojego głównego elementu menu, a nie do podmenu.

Adding a CSS class to a menu in the full-site editor

Teraz, tutaj rzeczy się różnią. Musisz przejść na twoją witrynę internetową WordPress i otworzyć narzędzie inspekcji w przeglądarce.

W przypadku użytkowników przeglądarki Chrome wystarczy kliknąć prawym przyciskiem myszy twój element menu z podmenu i wybrać opcję „Sprawdź”.

Accessing the Inspect element tool in Chrome

Na twojej klawiaturze naciśnij CTRL/Command + F, aby włączyć funkcję Znajdź. Następnie zlokalizuj kod HTML <ul></ul>, który zawiera klasę paska przewijania.

Dokładny kod będzie różnił się w zależności od motywu, ale oto jak wygląda nasz:

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

Będziesz wiedział, że wybierasz właściwą linię kodu, jeśli wszystkie elementy podmenu są podświetlone.

Locating the scroll-bar element using the Inspect tool

Teraz chcesz skopiować wszystkie te klasy CSS między class=" i ">.

W kodzie CSS zastąp klasę scroll-bar wszystkimi tymi klasami i kropką (.) przed nią, aby wskazać, że jest to klasa. Warto również dodać ! important w każdej linii, która konfiguruje pasek przewijania, aby upewnić się, że motyw nie zastąpi tych ustawień.

Oto przykład:

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Po dodaniu tego kodu, twoje menu nawigacyjne powinno wyglądać następująco:

An example of a scrollbar in a block theme menu made with CSS

Jak dostosować wygląd własnego paska przewijania?

Teraz, gdy dodałeś własny pasek przewijania, możesz chcieć dopasować go do wyglądu twojej witryny internetowej. Możesz łatwo zmienić wygląd paska przewijania za pomocą CSS. Przyjrzyjmy się, jak dostosować jego rozmiar, kolor i kształt.

Załóżmy, że chcesz zmienić maksymalną wysokość elementu, do którego dodajesz pasek przewijania. W takim przypadku możesz zmienić liczbę w max-height: u góry na dowolną liczbę, o ile jest wyrażona w pikselach.

Możesz także dostosować liczbę w width:, aby szerokość elementu z paskiem przewijania była szersza lub węższa.

Adjusting the scrollbar's heigh and width with CSS

Aby dostosować rozmiar paska przewijania, znajdź szerokość linii : 10px; pod selektorem .scroll-bar::-webkit-scrollbar.

Zwiększ tę liczbę, aby pasek przewijania był szerszy, lub zmniejsz ją, aby był węższy. Na przykład width: 15px; utworzy szerszy pasek przewijania, a width: 5px; sprawi, że będzie on cieńszy.

Adjusting the scrollbar size with CSS

Aby zmienić kolor paska przewijania, znajdź wiersz z napisem background: grey; pod selektorem .scroll-bar::-webkit-scrollbar-thumb.

Zastąp „szary” dowolnym kolorem, takim jak „niebieski” lub dowolnym kolorem przy użyciu kodu szesnastkowego (np. #0000FF).

Changing the scrollbar's color with CSS

Jeśli chcesz, aby pasek przewijania był bardziej zaokrąglony, poszukaj właściwości border-radius.

Im wyższa liczba, tym bardziej zaokrąglone będą rogi. Spróbuj zmienić border-radius: 15px; na border-radius: 20px; dla bardziej zaokrąglonego wyglądu lub border-radius: 0px; dla ostrych rogów.

Changing the scrollbar's border radius with CSS

Należy pamiętać, że powyższe zmiany będą miały wpływ tylko na przeglądarki oparte na Webkit, takie jak Chrome i Safari.

W przeglądarce Firefox należy dostosować właściwość scrollbar-color. Pierwszy kolor dotyczy kciuka (przeciąganej części), a drugi ścieżki (tła). Na przykład scrollbar-color: blue #eaeaea utworzy niebieski pasek przewijania na jasnoszarej ścieżce w przeglądarce Firefox.

Changing the scrollbar's appearance in Firefox with CSS

Po wprowadzeniu tych zmian, zapisz CSS i odśwież swoją stronę WordPress, aby zobaczyć nowy, dostosowany pasek przewijania w działaniu. Zachęcamy do eksperymentowania z różnymi kolorami i rozmiarami, aż znajdziesz idealny wygląd dla twojej witryny internetowej.

Dowiedz się więcej o sposobach na ulepszenie twojego WordPress Web Design

Teraz, gdy nauczyłeś się już, jak dodawać własne paski przewijania do witryny WordPress, dlaczego nie odkryć innych sposobów na ulepszenie wyglądu i funkcjonalności twojej witryny internetowej? Oto kilka pomocnych przewodników, które pomogą ci przenieść twoje umiejętności WordPress na wyższy poziom:

  • Jeśli chcesz zaprezentować swoje strony w atrakcyjny wizualnie sposób, zapoznaj się z naszym poradnikiem, jak łatwo wyświetlić listę stron z miniaturami w WordPress.
  • W przypadku blogów z dużą ilością treści, nieskończone przewijanie może znacznie poprawić wrażenia użytkownika. Dowiedz się, jak dodać tę funkcję krok po kroku.
  • Aby dodać trochę wizualnego stylu, spróbuj dodać efekt paralaksy do twojego motywu WordPress. Jest to łatwiejsze niż mogłoby się wydawać.
  • Aby poprawić dostępność, rozważ dodanie zmiany kro ju pisma do twojej witryny. Mamy prosty przewodnik, który pomoże ci to zrobić.
  • Jeśli nie jesteś zadowolony z obecnego, aktualnego położenia twojego paska bocznego, możemy pokazać ci, jak zmienić panel boczny w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać własny pasek przewijania do dowolnego elementu na twojej witrynie WordPress. Warto również zapoznać się z naszym wyborem najlepszych kreatorów motywów WordPress i naszym przewodnikiem na temat dodawania paska postępu czytania w WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

18 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. alex says

    Hello I cannot seem to get my custom scroll bar to display vertically??? I have it set to a wordpress text widget with the height at 400 px and the width at 100 px and it comes up horizontal which is not what I need. thank you

    • WPBeginner Support says

      Your content may not be tall enough, you may want to reach out to the plugin’s support and they should be able to assist.

      Administrator

  3. irit says

    hi
    Thank you for sharing the plugin :)
    i have a very long image that i would like to put a scroll bar on.
    i know i have the right selector since the element does change, unfortunately it just „squishes” to whatever size i put into height (i used Elementor to create that page)
    thank you

    • WPBeginner Support says

      You would want to first reach out to Elementor as their page builder may be preventing the image from going beyond the size of the section you have set up.

      Administrator

  4. Danny says

    This is exactly my idea – to use it and make visitors spend more time on my site. My frontpage is such that I can combine several pages. So there is this particular page that is part of my front page, but it is long, so i want to use the scrolling to keep it short yet visitors can scroll just within it.
    My problem is that I dont know the Target Element ID.
    Can you assist?

    • WPBeginner Support says

      If you reach out to your theme’s support for the specific section you want they should be able to let you know the element they’re using.

      Administrator

  5. Danny says

    I want to add scrolling on a particular page – the page itself, not the sidebar or any widget.
    What will the Target ELement ID be?
    I right-clicked on the page body, but I dont know what to look out for. Can anybody advice?

    • WPBeginner Support says

      It would depend on the specific theme but normally for what you’re wanting it would be the content area.

      Administrator

  6. Alexandre says

    Very nice and easy to custom widget. However, it took me a couple of hours to find what to enter in the Target Element Sector section while using Elementor. It finally worked with the following line: „.elementor-element-6daf57c”. The dot („.”) at the beginning is important.

    Thank you!

  7. Rushikesh says

    This is working for desktop view, but I don’t want this scrollbar work on mobile devices. Because it’s ruin responsiveness. How can I do it to stop working on mobile devices?

  8. Rosie Malik says

    This tool is such a tremendous help to website appearance and functionality! You can select your featured items (pictures, posts, etc.) and put them almost anywhere … and several times, too! Your site visitor will spend more time on your site and interract with more content, etc. This is a total win/win!

  9. igor Griffiths says

    Thanks for sharing this plugin and more importantly how to set it up, I would never have thought to use the Chrome inspect element to find the target id without many hours of experimentation.

    Looks like a very flexible plugin that with a little imagination could be put to many powerful and engaging uses

    igor

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.