Fatal编程技术网
  • css/
  • Css 如何使滚动仅在一个屏幕上工作<；部门>；？

Css 如何使滚动仅在一个屏幕上工作<；部门>；？

css

Css 如何使滚动仅在一个屏幕上工作<；部门>；？,css,overflow,screen-orientation,Css,Overflow,Screen Orientation,编辑：已解决，在评论中回答 我试图让它的右边滚动，而左边保持不变，但只在风景中。我成功地使用了position:fixed，但在横向/纵向之间切换时需要刷新页面，因为地图不会切换样式。现在我正在尝试（但失败）使用溢出。你知道怎么做吗 代码笔副本： <style> @media (orientation: landscape) { body { display: flex; flex-direction: row; overfl

编辑：已解决，在评论中回答

我试图让它的右边滚动，而左边保持不变，但只在风景中。我成功地使用了
position:fixed
，但在横向/纵向之间切换时需要刷新页面，因为地图不会切换样式。现在我正在尝试（但失败）使用
溢出
。你知道怎么做吗

代码笔副本：

<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': '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    leafletMap.addLayer(normalLayer);
</script>


@媒体（方向：景观）{
身体{
显示器：flex；
弯曲方向：行；
溢出：隐藏；
}
正文>div{
弹性：1；
}
#地图{
高度：100vh；
}
#对{
溢出y：滚动；
}
}
@媒体（方向：纵向）{
#地图{
高度：50vh；
}
}
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
>可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动
可滚动

设传单map=L.map（'map'）.fitBounds([
[45, -63],
[40, -124]
]);
设normalLayer=L.tileLayer（'/{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
“归属”：“复制；贡献者”
});
传单贴图。添加图层（法线图层）；
您需要固定高度才能使溢出属性正常工作。因此，通过使你的高度元素100%应该做的工作

#yourElement {
    height: 100%;
    overflow: auto;
}
溢出滚动和自动滚动的区别在于，滚动时滚动条始终可见，即使没有可滚动的内容。

将您的
#右
div设置为固定的
高度
可以允许滚动其内部内容，同时将div保持在一个位置。@ShivCKushawah成功了，谢谢！它只需要
#右{高：100vh；}
。如果你想创建一个答案，我会接受它，或者我可以删除这个问题，因为它太简单了。主要目的是解决你的问题。很乐意帮忙。：）