-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