• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Podwójny scrollbar na stronie internetowej

Object Storage Arubacloud
0 głosów
497 wizyt
pytanie zadane 1 sierpnia 2020 w HTML i CSS przez Vince Nowicjusz (200 p.)
<!DOCTYPE html> <html lang="pl"> 
<head> 
<meta charset="UTF-8"> 
<title>Website</title> 
<meta name='viewport' content='initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> <meta name="description" content=""> 
<meta name="keywords" content=""> 
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">


body
{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    background: #4c1992;
    box-sizing: border-box;
}

.all
{
    overflow-x: hidden;
}

Witam

Na mojej stronie internetowej pojawił się podwójny scrollbar, gdy naprawiłem problem z responsywnością. Czy jest jakaś możliwość na dodanie komendy, która to naprawi?

Dołączam fragmenty kodu, które są moim zdaniem odpowiedzialne za problem. Z góry dziękuję za pomoc.

komentarz 1 sierpnia 2020 przez CubeStorm Pasjonat (15,020 p.)

overflow-x odpowiada tylko za scrollbar w osi x. Chodzi Ci o scrollbar w jakimś elemencie strony, czy scrollbar w osi x? Pokaż jakieś zdjęcia.

komentarz 1 sierpnia 2020 przez Vince Nowicjusz (200 p.)
Chodzi o scrollbar pionowy, góra- doł. Są dwa scrollbary obok siebie.
1
komentarz 1 sierpnia 2020 przez CubeStorm Pasjonat (15,020 p.)
Mógłbym prosić o screena? Najlepiej link do całej strony, jeśli jest już upubliczniona.
komentarz 1 sierpnia 2020 przez Vince Nowicjusz (200 p.)
ciekaweankiety.pl

4 odpowiedzi

+1 głos
odpowiedź 1 sierpnia 2020 przez Comandeer Guru (603,480 p.)

Problemem jest overflow-x: hidden dla .all. Jeśli dla jednej z osi da się hidden, to druga automatycznie przełączy się na auto i będzie się pojawiał pasek przewijania (czyli jeśli ukryjesz wystające elementy w poziomie, to w pionie będzie się pokazywał pasek przewijania, jeśli jakiś element wystaje).

Najlepiej byłoby po prostu usunąć overflow-x dla .all, bo żaden element z niego nie wystaje poziomo, więc ta reguła jest całkowicie niepotrzebna.

0 głosów
odpowiedź 1 sierpnia 2020 przez CubeStorm Pasjonat (15,020 p.)

Popraw na: 

.all
{
    overflow: hidden;
}

Gdyby nie zadziałało to możesz dodać " !important ".

komentarz 1 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Gdyby nie zadziałało to możesz dodać " !important ".

Zanim użyje się !important w celu nadpisania stylu warto podbić specyficzność selektora przez dodanie klasy, atrybutu lub rozszerzenie selektora o parenta (lub przodka) danego elementu. Użycie !important spowoduje, że w razie potrzeby nadpisania danego stylu w innym miejscu, trzeba będzie znowu użyć !important, a nadużywanie tej reguły zaburza hierarchię specyficzności styli.

Reguły !important powinno używać się zapobiegawczo, a nie w celu rozwiązania problemów ze specyficznością - chyba, że pracuje się z 3rd party CSS-em i nie ma innego wyjścia.

https://csswizardry.com/2012/11/code-smells-in-css/#reactive-important

0 głosów
odpowiedź 1 sierpnia 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
edycja 1 sierpnia 2020 przez _Pita_

Dodałem do diva z klasą .all:

style="overflow: hidden"

I chyba działa poprawnie.

Oczywiście zadziała też w klasie  :D

komentarz 1 sierpnia 2020 przez Comandeer Guru (603,480 p.)
Tylko że dokładnie takie zachowanie jest obecnie i to właśnie ono powoduje błąd.
komentarz 1 sierpnia 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Mój błąd, nie zrozumiałem sekcji komentarzy, edytuję :D
0 głosów
odpowiedź 1 sierpnia 2020 przez VBService Ekspert (254,880 p.)
edycja 1 sierpnia 2020 przez VBService
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    background: #4c1992;
    box-sizing: border-box;
}

.all {
  ... bez overflow ...
}

/* a tu bonus, może się spodoba ;-) */

body::-webkit-scrollbar {
    width: 0.6em;
}
body::-webkit-scrollbar-thumb {
    width: 0.4em;
    background-color: #c26606;
    border-radius: 5px;
}
body::-webkit-scrollbar-track {
    border: 3px solid #4c1992;
    background-color: #1ebd90;
}

 

Podobne pytania

0 głosów
1 odpowiedź 152 wizyt
0 głosów
3 odpowiedzi 308 wizyt
pytanie zadane 4 października 2018 w Offtop przez Vickul Stary wyjadacz (12,850 p.)
+1 głos
1 odpowiedź 337 wizyt
pytanie zadane 23 kwietnia 2021 w HTML i CSS przez Miemaj Nowicjusz (130 p.)

92,755 zapytań

141,676 odpowiedzi

320,412 komentarzy

62,100 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...