机车滚动在大型内联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 (将#修改为@）