Как скрыть «полосу прокрутки»?

внешний интерфейс браузер Chrome Firefox CSS
Как скрыть «полосу прокрутки»?

разъяснение проблемы

Что такое «полоса прокрутки»?

Полоса прокрутки относится к части, обведенной красной линией в правой части рисунка ниже:

Полосы прокрутки появляются всякий раз, когда содержимое страницы больше, чем область просмотра.

В общем, пока нетbodyиерархическая полоса прокрутки, используйтеoverflow: hidden;Это может решить проблему полос прокрутки, но в это время страница также не сможет прокручиваться.

В настоящее время существует множество скрытыхbodyИерархическая полоса прокрутки может прокручивать страницуобучение, поэтому эта статья в основном посвящена тому, как скрыть браузер (то естьbodyуровень) полоса прокрутки.

Решение

Для разных браузеров есть разные способы скрыть полосу прокрутки.Ниже описаны три основных браузера: chrome, т.е. (включая edge), и firefox:

Chorme

body::-webkit-scrollbar {
    display: none;
}

IE/Edge

body {
    -ms-overflow-style: none;
}

Firefox

Firefox - самый проблемный из трех:

html {
    overflow: -moz-hidden-unscrollable; /*注意！若只打 hidden，chrome 的其它 hidden 会出问题*/
    height: 100%;
}

body {
	height: 100%;
	width: calc(100vw + 18px); /*浏览器滚动条的长度大约是 18px*/
	overflow: auto;
}

Это не конец, надо добавить в некоторых местахwidth: 100vw;.

Предположим, вашHTMLЭто выглядит так:

<body>
    <div id="example-1">
        <p>难臺子哥式自不家草要计在来也见加正活书。</p>
    </div>
    <article id="example-2">
        <h1>意家的不称打准无政！</h1>
        <p>得研河金起里美希孩有人裡人。料低不。</p>
        <button>处拉</button>
    </article>
</body>

тогда твойCSSПросто добавь:

#example-1 {
    width: 100vw;
}

#example-2 {
    width: 100vw;
}

Суммировать

Подводя итог, если вы хотите, чтобы полосы прокрутки трех основных браузеров были скрыты и прокручивались, то вашCSSСразуПо меньшей мереЧтобы быть таким:

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    height: 100%;
	width: calc(100vw + 18px);
	overflow: auto;
}

Что касаетсяwidth: 100vw;Куда добавить зависит от вашегоHTMLКак структура.

преимущество

Это позволяет читателям больше сосредоточиться на содержании, вместо того, чтобы лениться читать, выскакивать из страницы, когда полоса прокрутки слишком короткая, или в спешке тянуть полосу прокрутки прямо вниз. Другими словами, это заставляет читателя читать контент медленно.

недостаток

Если читатель хочет оглянуться назад, это может занять много времени. Итак, если вы хотите скрыть полосу прокрутки для более длительного текста, рекомендуется иметь навигационную панель, чтобы считыватели могли быстро перейти на определенное место.

Если эта статья решит вашу проблему, вы можете нажать любовь или избранное.
Если у вас есть какие-либо сомнения или предложения, вы можете оставить сообщение ниже, чтобы общаться и учиться вместе☺

Категории