Как скрыть полосу прокрутки переполнения на Microsoft Chrome, когда прокручивать некуда? - PullRequest
Новая
       1

Как скрыть полосу прокрутки переполнения на Microsoft Chrome, когда прокручивать некуда?

0 голосов
/ 07 февраля 2020

Есть ли способ скрыть полосы прокрутки для Microsoft Chrome и скрывать их только тогда, когда нет места для прокрутки? Следующие элементы div / styles всегда отображают полосу прокрутки, горизонтальную и вертикальную. Даже когда высота больше, чем содержимое. 

<div style="background: red; width: 200px; height: 100px; overflow: scroll">
  This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.
</div>

Следующее скрывает полосу прокрутки: 

::webkit-scrollbar{
   display:none
}

Но я хочу, чтобы они показывали, когда есть где прокрутить

Есть ли способ скрыть только горизонтальную полосу прокрутки?

Ответы [ 3 ]

1 голос
/ 07 февраля 2020

Используйте свойство overflow-y и установите его на auto, чтобы включить вертикальную полосу прокрутки, когда это необходимо.

Установите overflow-x на hidden, чтобы полностью отключить горизонтальную прокрутку.

0 голосов
/ 08 февраля 2020

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

В других случаях упоминается overflow: auto, поэтому при превышении заданной высоты c полоса прокрутки появляется. Вот код ниже, если вы go в полном размере не будете иметь полосу прокрутки. 

div{
background: red; width: 200px;overflow:auto;}
<div >
  This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
</div>

Теперь в случае горизонтального и вертикального были CSS правил, определяющих c для этого. overflow-x и overflow-y

Чтобы скрыть горизонтальную полосу .. здесь вы go;) 

   .vertical-scroll{
     width:100px;height: 100px; overflow-y: scroll;overflow-x:hidden;}
<h1>Hide horizontal scroll</h1>
           <div class="vertical-scroll" >
            This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.
          </div>
0 голосов
/ 08 февраля 2020

Установите overflow-x: auto;overflow-y: auto; на div, он показывает полосы прокрутки, только если они необходимы. (С этот пост ) Так ваш окончательный код должен выглядеть так: 

<html>
<head>
<style>
::webkit-scrollbar{
   display:none
   
}
</style>
</head>
<body>
<div style="background: red; width: 200px; height: 100px; overflow: scroll;overflow-x: auto;overflow-y: auto;">
  This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.This is a test. This is a test. This is a test. This is a test. This is a test.
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...