Скрыть скролл только в модальном, но все еще можно прокручивать внутри модального - PullRequest
Новая
       17

Скрыть скролл только в модальном, но все еще можно прокручивать внутри модального

0 голосов
/ 28 января 2019

Я создаю модал, в котором много информации, я хотел спрятать полосу прокрутки только в МОДАЛЕ, но не в теле, но все еще прокручиваемый в модале.

Я пробовал 

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

Но он также скрывает полосу прокрутки в теле.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" style='overflow-y: scroll; height:350px;'>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

это JS Fiddel http://jsfiddle.net/tLrmb5a8/

Я ожидаю скрыть свиток ВНУТРИ только модал.

1 Ответ

0 голосов
/ 28 января 2019

Возможно, что-то вроде этого вы ищете: 

.modal-body{
  height:300px;
  overflow-y:auto;
}

@-moz-document url-prefix() {
   /*firefox*/
   .modal-content {
    overflow: hidden;
   }
   .modal-body{
     margin-right: -16px;
     overflow-y: scroll;
     overflow-x: hidden;
   }
}

.modal-body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

JsFiddle Fork или фрагмент: 

.modal-body{
  height:300px;
  overflow-y:auto;
}

@-moz-document url-prefix() {
   /*firefox*/
   .modal-content {
    overflow: hidden;
   }
   .modal-body{
     margin-right: -16px;
     overflow-y: scroll;
     overflow-x: hidden;
   }
}

.modal-body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
} 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ac sem vitae pretium. Nam cursus nisl vitae ex sodales pellentesque. Fusce in accumsan nibh, blandit aliquam felis. Curabitur elementum ac ex sed iaculis. Aliquam vel hendrerit orci, at blandit metus. Maecenas semper erat velit, nec efficitur augue accumsan in. In sed eros vitae arcu aliquam accumsan in eget nibh. Integer sapien tortor, fringilla at augue a, posuere aliquam augue. Donec vestibulum vestibulum ex ac vulputate. Nam interdum sagittis leo, non consequat nisl convallis ut. In urna ex, porta in placerat vel, volutpat in est. Ut ornare tempor semper. Praesent ipsum lacus, viverra ac arcu ac, commodo tristique velit.</p><br>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Предоставлено Свиток Firefox и Специальное поле Firefox

...