如何解决机车滚动在大型内联svg上减速
我正在使用Locomotive scroll和amcharts绘制svg地图作为固定高度容器的背景。当地图位于视口中时,滚动速度会变慢。
这是我所做的一个粗略示例:https://codepen.io/anastasiavyalt/pen/GRqGraB。
如果您设置显示:无或可见性:隐藏或不透明:0到svg上的css,则滚动行为符合预期,这是我想要实现的。
有什么可以做的吗?
html
<div class="wrapper" data-scroll-container>
<div data-scroll-section>
<h1 data-scroll>Loco<br> motive<br> scroll</h1>
</div>
<div data-scroll-section>
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="map-container" data-scroll-section>
<div id="chartdiv"></div>
</div>
<div data-scroll-section>
<h1 data-scroll>Loco<br> motive<br>scroll</h1>
</div>
<div data-scroll-section>
<h1 data-scroll>Loco<br> motive<br>scroll</h1>
</div>
<div data-scroll-section>
<p>
Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
相关CSS
.map-container {
position: relative;
height: 250vh;
}
#chartdiv {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
js
const locoScroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),smooth: true
});
am4core.ready(function() {
var chart = am4core.create("chartdiv",am4maps.MapChart);
chart.maxZoomLevel = 1;
chart.geodata = am4geodata_worldLow;
chart.projection = new am4maps.projections.Miller();
var polygonSeries = chart.series.push(new am4maps.MappolygonSeries());
polygonSeries.exclude = ["AQ"];
polygonSeries.useGeodata = true;
var polygonTemplate = polygonSeries.mappolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.polygon.fillOpacity = 0.6;
var hs = polygonTemplate.states.create("hover");
hs.properties.fill = chart.colors.getIndex(0);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。