javascript - 如何固定创建地图和附近的 div,以便 div 的内容随着滚动而移动?
问题描述
我在右侧 div 中有一些房子,在左侧有一张地图,我想创建类似以下地址的内容: https ://www.hometogo.com/search/5460aea1318a0?campaign=widget/all/a/wimdu/ 5460aea1318a0&w-message=1&persons=2&arrival=2018-10-10&duration=9
我希望我的地图像顶部链接一样固定,并且应该能够看到更多带有滚动条的房屋,并且我不希望带有 showResultSearch 类的 div 有滚动条。我该怎么做?
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('searchMap'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
.searchContainer {
overflow: hidden;
position: relative;
}
.searchResults {
width: 60%;
float: right;
border-top: 1px solid #eee;
}
.showResultSearch {
clear: both;
border-top: 1px solid #eee;
padding-right: 30px;
padding-left: 30px;
margin-left: auto;
margin-right: auto;
max-height: 600px;
overflow-y: auto;
}
.searchMap {
border: 1px solid lightgray;
float: right;
width: 40%;
height: 600px;
}
#searchMap {
width: 100%;
height: 100%;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-sm-6 {
padding-left: 15px;
padding-right: 15px;
width: 50%;
float: right;
}
.specialOffer {
width: 100%;
}
<header></header>
<div class="searchContainer">
<div class="searchResults">
<div class="showResultSearch">
<div class="row" id="houses">
<div class="col-sm-6">
<figure class="specialOffer">
<a href="#" class="images">
<img src="Images/house1.jpg" />
</a>
<figcaption>
<div class="title-house">
<a href="#" class="house-name">
<h3>house1 </h3>
</a>
</div>
</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure class="specialOffer">
<a href="#" class="images">
<img src="Images/house2.jpg" />
</a>
<figcaption>
<div class="title-house">
<a href="#" class="house-name">
<h3>house2 </h3>
</a>
</div>
</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure class="specialOffer">
<a href="#" class="images">
<img src="Images/house1.jpg" />
</a>
<figcaption>
<div class="title-house">
<a href="#" class="house-name">
<h3>house3 </h3>
</a>
</div>
</figcaption>
</figure>
</div>
<div class="col-sm-6">
<figure class="specialOffer">
<a href="#" class="images">
<img src="Images/house1.jpg" />
</a>
<figcaption>
<div class="title-house">
<a href="#" class="house-name">
<h3>house4 </h3>
</a>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="searchMap">
<div id="searchMap"></div>
</div>
</div>
<footer>
</footer>
解决方案
抛出 position: relative out of .searchContainer 并添加 display: flex。
设置位置:固定在#searchMap
据我了解您的问题,工作正常。至于滚动条尝试使用溢出(溢出:隐藏)或宽度和高度。
推荐阅读
- javascript - 防止反应按钮组件中的默认按钮行为(页面重新加载)
- azure-data-factory - 使用 rest api 创建在数据工厂 v2 中运行的管道
- textures - Assimp 不从层文件中读取纹理坐标信息
- c++ - 如何调整静态控件以显示阿拉伯语(从右到左)文本?
- java - 在 Java + Spring + JPA 中模拟死锁?
- pandas-apply - 应用返回数据框
- python - 如何对具有非唯一值的倒排字典进行排序?
- sockets - 几次迭代后,在匿名线程内使用 wi-fi 套接字传输数据停止 - 已关闭
- pdf - 如何更改 PDF/PostScript 文件中的行宽
- java - 在 Eclipse 默认编辑器的插入符号下查找字符串