Как скрыть вертикальную полосу прокрутки документа, когда модал имеет прокрутку в w3.css? - PullRequest
Новая
       23

Как скрыть вертикальную полосу прокрутки документа, когда модал имеет прокрутку в w3.css?

0 голосов
/ 10 февраля 2019

В w3.css, когда содержимое модального канала достаточно велико, оно добавляет vertical scrollbar, что оно является обычным и все в порядке.но когда основной HTML-документ имеет собственную полосу прокрутки, обе полосы прокрутки будут добавлены близко друг к другу, и это уродливо.: 

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Modal</h2>
  <p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-btn w3-black">Open Modal</button>
  <p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p><p>The w3-modal class creates a dialog box/popup window that is displayed on top of the current page.</p>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h2>Header</h2>
      </header>
      <div class="w3-container">
        <p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p><p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Footer</p>
      </footer>
    </div>
  </div>
</div>
          
</body>
</html>

Подскажите, пожалуйста, как мне этого избежать?

1 Ответ

0 голосов
/ 10 февраля 2019

его работа меня.Вы можете удалить ширину полосы прокрутки, просто используйте ::-webkit-scrollbar этот селектор 

.w3-container{
  max-height: 500px;
  overflow: auto;
}
.w3-container::-webkit-scrollbar {
  width: 0;
}
...