-1
现在，只要我在底部滚动，它确实this。我希望只能通过侧边栏向下滚动，但它似乎在整个页面中都这样做。试图让只有侧边栏滚动而不影响其他任何东西
侧边栏和主要内容位于我附加的HTML的最底部，但我想整个事情可能是有用的。
var map = L.map('map', {
center: [16.15, 105.237],
zoom: 6
});
var mainTileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);body {
padding-top: 100px;
}
#primary-navbar {
box-shadow: 0 5px 5px -5px #999799;
}
#secondary-navbar {
z-index: 999;
margin-top: 50px;
background-color: aliceblue;
box-shadow: 0 5px 5px -5px #999799
}
#sidebar {
z-index: 998;
min-height: 100%;
padding-top: 25px;
overflow-y: scroll;
box-shadow: 5px 0 6px -1px #888888;
}
#map-container {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100%;
}<html>
<head>
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="primary-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Contact</a></li>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-fixed-top navbar-lower" id="secondary-navbar" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse collapse-buttons">
<div class="col-sm-2 col-md-2">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="navbar-search-box">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
<ul class="nav navbar-nav">
<li class="dropdown" id="filter-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" Action>Dropdown Option 1</a></li>
<li><a href="#">Dropdown Option 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-sm-4" id="sidebar" role="navigation">
<p>Lotta text here.</p>
</div>
<div class="col-xs-12 col-sm-8" id="map-container">
<div id="map"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
</body>
</html>
这确实帮助，那种！地图不再滚动，但它将滚动条放置在通常位于的最右侧，而不是侧边栏上它应该在的位置。 – Vigilant
啊！我不知道这是必要的，对不起。 然后给一个'max-height'（例如：100vh）的容器，一个'overflow：hidden;'，并在#sidebar上，尝试 'overflow-y：scroll;' 'height：100vh;'（与容器相同） – arsea
看看这是否有帮助：http://jsbin.com/winorehage/edit?html,css,output – arsea