Podwójny scrollbar na stronie internetowej

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

odpowiedź 1 sierpnia 2020 przez Comandeer Guru (600,810 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.

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

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 (600,810 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

odpowiedź 1 sierpnia 2020 przez VBService Ekspert (252,660 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;
}