传单与位置:固定叶灰色轨迹后滚动

Leaflet with position:fixed leaves gray trail after scrolling

本文关键字：灰色轨迹 滚动 位置      更新时间：2023-09-26

我正在尝试制作包含两个div的网站：

  • 左，可滚动内容
  • 右，不移动（位置固定），仅包含标签和传单地图

当我滚动页面时，传单会留下灰色痕迹，我想摆脱这些痕迹。

我在这里找到的（在stackoverflow）是map.invalidateSize（），但它对我没有帮助。

在此处观看完整的 jsfiddle 示例。

.HTML：

<div id="map">      
</div>
<div id="content">
Heres the text<br />
    ...
</div>

.CSS：

html, body, #map {
    width: 100%;
    height: 100%;
}
#map{
    width: 400px; 
    height: 400px; 
    position: fixed; 
    left: 60%; 
    top: 30%;   
}

.JS：

    // create a map in the "map" div, set the view to a given place and zoom
    var map = L.map('map').setView([51.505, -0.09], 13);
    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    window.map = map;
$(document).ready(function(){
    $(window).scroll(function(){
        window.map.invalidateSize();
    })
})
将其

更改为background: none; 

#map{
    width: 400px; 
    height: 400px; 
    background: none;
    position: fixed; 
    left: 60%; 
    top: 30%;   
}
相关文章：