Как включить прокрутку для div, который отображается при нажатии кнопки

javascript jquery html css

59 просмотра

2 ответа

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

Я пытался, overflow: scrollно это не сработало. Прокрутка применяется к внутреннему div, который отображается при нажатии кнопки, но я хочу применить к странице при нажатии. Как мне это работает?

Плункер здесь: https://plnkr.co/edit/JzGCix39dSd1q7KOiNTc?p=preview

Код:

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" id="showKoo" onclick="showKoo()">Tool bar</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="mainBorder topcorner complete_width complete_height" id="box" style="display: block; background-color:red">
      <h4> SOME CONTENT</h4>
    </div>
  </body>

CSS:

body{
  overflow: scroll;
}

.centered_div{
    margin: 0 auto;
}

.mainBorder{
    border: 1px #B2B9BA solid;
    overflow:scroll;
}

.topcorner{
    position:fixed;
    top:41px;
    right:30px;
}

.complete_width {
    min-width: 360px;
    max-width: 360px;
}

.complete_height {
    min-height:640px;
    max-height:640px;
}

ЯШ:

function showKoo() {
    $('#box').toggle();
}
Автор: Satyadev Источник Размещён: 08.11.2019 10:55

Ответы (2)


2 плюса

Не стоит упоминать переполнение для тела. Это добавит прокрутку на основе содержимого.

Попробуйте положение: абсолютное вместо фиксированного.

// Code goes here

function showKoo() {
    $('#box').toggle();
}
/* Styles go here */


body{
  position:relative;
}

.centered_div{
    margin: 0 auto;
}

.mainBorder{
    border: 1px #B2B9BA solid;
    
}

.topcorner{
    position:absolute;
    top:41px;
    right:30px;
}

.complete_width {
    min-width: 360px;
    max-width: 360px;
}

.complete_height {
    min-height:640px;
    max-height:640px;
}
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" id="showKoo" onclick="showKoo()">Tool bar</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="mainBorder topcorner complete_width complete_height" id="box" style="display: block; background-color:red">
      <h4> SOME CONTENT</h4>
    </div>
  </body>

</html>

Автор: Charantej Golla Размещён: 20.08.2016 05:35

1 плюс

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

В этом случае ваш ящик имеет «position: fixed» из-за «.topcorner».

Это выталкивает его из нормального потока документа, заставляя тело не принимать во внимание его высоту.

Вам действительно нужно положение: зафиксировано на этом элементе?

Автор: hellojebus Размещён: 20.08.2016 05:29
Вопросы из категории :
32x32