在移动设备上的传单地图上滚动模式的错误

Question

我在传单地图上有一个引导模式。 当我在 Chrome 移动或三星移动浏览器上滚动模式时，浏览器的导航栏消失，这会增加显示高度。额外的高度会以白色区域的形式出现在地图下方，从而扰乱显示。

<template>
  <div id="app">
    <l-map ref="map" :center="[51, 0]" :zoom="10" @ready="onReady()">
      <l-tile-layer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"/>
      <l-circle-marker :lat-lng="[51, 0]" @click="testModal.show()"/>
    </l-map>
    <div ref="testModal" class="modal fade" id="testModal" tabindex="-1" aria-labelledby="poi" aria-hidden="true">
      <div ref="scrollable" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Test</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p v-for="n in 30" :key="n">line {{n}}</p>
           </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Modal } from 'bootstrap';
import { LMap, LTileLayer, LCircleMarker } from 'vue2-leaflet';

export default {
  name: 'App',
  components: {
    LMap,
    LTileLayer,
    LCircleMarker,
  },
  methods: {
    onReady() {
      let map = this.$refs.map.mapObject;
      document.getElementById('testModal').addEventListener('hide.bs.modal', () => {
        // map.invalidateSize();  // this does not fix
      });
    },
  },
  mounted() {
    this.testModal = new Modal(document.getElementById('testModal'));
  }
}
</script>

<style>
html, body, #app {
  height: 100%;
}
</style>

<style lang="scss">
@import '~bootstrap/scss/bootstrap.scss';
</style>

我尝试破解模式的显示，但滚动对于 safari 根本不起作用。

.modal.show {
  overflow-y: hidden;

  .modal-dialog {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    margin-top: 0;
    margin-bottom: 0;
  }
  .modal-dialog::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

Answer 1

我刚刚将样式从 100% 更改为 100dvh，现在效果很好

html, body, #app {
  height: 100dvh;
}