javascript - 如何为单击按钮时显示的 div 启用滚动-6ren

javascript - 如何为单击按钮时显示的 div 启用滚动

转载作者：太空宇宙更新时间：2023-11-03 22:54:08

我有一个 div，它在单击导航栏中的按钮时显示。 div 的高度超过视口(viewport)/页面。我想在显示 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;
}

js:

function showKoo() {
    $('#box').toggle();
}

最佳答案

body 就不用提overflow了。它会根据内容附加滚动条。

尝试 position:absolute 而不是 fixed。

// 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>

关于javascript - 如何为单击按钮时显示的 div 启用滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39050739/

文章推荐： opencv - Centos安装OpenCV 2.4.11报错

文章推荐： node.js - 如何创建使用 gulp 的 node.js 命令行实用程序

文章推荐： c++ - Opencv VideoWriter 只保存一帧

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何为单击按钮时显示的 div 启用滚动