So lösen Sie Probleme mit dem Stil der Bildlaufleiste

Ich glaube, viele Kollegen waren durch die Bildlaufleistenstile verschiedener Browser verwirrt und die Standard-Bildlaufleistenstile verschiedener Browser sind nicht konsistent. Im Internet gibt es viele Meinungen zum Ändern des Bildlaufleistenstils, aber die meisten davon sind oberflächlich. Heute werde ich nur über praktische Informationen sprechen, die rein praktischen Informationen stammen aus der Empfehlung eines meiner Kollegen. Hier möchte ich mich bei meinem Kollegen bedanken.

Schritt 1: Sie müssen den folgenden Code in das Tag style einfügen

/* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

Schritt 2: Stile zum Container hinzufügen

overflow:auto; (oder overflow-y:auto; oder overflow-x:auto;)

Der Effekt wird nicht veröffentlicht, sodass Sie den wundersamen Moment persönlich miterleben können! Wenn es nicht funktioniert, können Sie gerne einen Stein fallen lassen~

Das obige ist der detaillierte Inhalt vonSo lösen Sie Probleme mit dem Stil der Bildlaufleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!