编辑:已解决，在评论中回答
我试图让这个东西的右侧滚动，而左侧保持不动，但仅限于横向。我使用 position: fixed 取得了一些成功，但在横向/纵向之间切换时需要刷新页面，因为 map 不会切换样式。现在我正在尝试(但失败了)使用 overflow。知道如何正确执行此操作吗？
https://codepen.io/dvtan/pen/mYrzqo
代码笔副本:
<style>
@media (orientation: landscape) {
body {
display: flex;
flex-direction: row;
overflow: hidden;
}
body > div {
flex: 1;
}
#map {
height: 100vh;
}
#right {
overflow-y: scroll;
}
}
@media (orientation: portrait) {
#map {
height: 50vh;
}
}
</style>
<body>
<div id="left">
<div id="map"></div>
</div>
<div id="right">
scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>
</div>
</body>
<script>
let leafletMap = L.map('map').fitBounds([
[45, -63],
[40, -124]
]);
let normalLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
leafletMap.addLayer(normalLayer);
</script>
最佳答案
您需要固定高度才能使溢出属性起作用。因此，通过让您的高度元素 100% 应该可以完成工作。
#yourElement {
height: 100%;
overflow: auto;
}
overflow scroll 和 auto 之间的区别在于，当它滚动时，滚动条始终可见，即使没有要滚动的内容也是如此。
关于css - 如何让滚动只在一个 <div> 上起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56117029/