소스 검색

safari 浏览器 100vh不能铺满屏幕的问题

黄琪勇 11 달 전
부모
커밋
2753384923
2개의 변경된 파일4개의 추가작업 그리고 2개의 파일을 삭제
  1. 3 1
      src/views/creation/index-share.tsx
  2. 1 1
      src/views/creation/index.module.less

+ 3 - 1
src/views/creation/index-share.tsx

@@ -59,6 +59,7 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const isScreenScroll = ref(false)
+    const creationHeight = ref(0)
     const lottieDom = ref()
     const lottieDom1 = ref()
     const lottieDom2 = ref()
@@ -318,6 +319,7 @@ export default defineComponent({
     };
     // 滚动事件
     const cleanScrollEvent = useEventListener('scroll', () => {
+      creationHeight.value = window.innerHeight
       const height =
         window.scrollY ||
         document.documentElement.scrollTop
@@ -451,7 +453,7 @@ export default defineComponent({
           browser().isTablet ? styles.creationTablet : '',
           isScreenScroll.value && styles.isShareScreenScroll
         ]}>
-        <div class={styles.creationBg}></div>
+        <div style={ creationHeight.value ? {"--creationHeight":creationHeight.value + "px"} : {}} class={styles.creationBg}></div>
         <MSticky position="top"
           onBarHeight={(height: any) => {
             console.log(height, 'height', height)

+ 1 - 1
src/views/creation/index.module.less

@@ -2,7 +2,7 @@
   position: fixed;
   z-index: -1;
   width: 100vw;
-  height: 100vh;
+  height: var(--creationHeight, 100vh);
   top: 0;
   left: 0;
   background: url("./images/bg.png") no-repeat;