diff --git a/src/components/Popup/Popup.js b/src/components/Popup/Popup.js index 19f21bc..3adb565 100644 --- a/src/components/Popup/Popup.js +++ b/src/components/Popup/Popup.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import "./Popup.scss"; import ShopList from "../ShopList/ShopList.js"; const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => { @@ -7,6 +7,7 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => { const [start, setStart] = useState(null); const [doTransition, setdoTransition] = useState(false); const baseHeight = long ? window.innerHeight : 312; + const listRef = useRef(null); useEffect(() => { setdoTransition(true); setHeight(long ? window.innerHeight : 312); @@ -28,7 +29,11 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => { ); if (!touch) return; const delta = touch.clientY - start.y; - setHeight(baseHeight - delta); + if (long) { + if (delta > 0) return; + if (listRef.current.scrollTop > 0) return; + } + setHeight(Math.min(baseHeight - delta, window.innerHeight)); }; const handleTouchEnd = (e) => { if (!start) return; @@ -37,6 +42,7 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => { ); if (!touch) return; setStart(null); + if (long && listRef.current.scrollTop > 0) return; const delta = touch.clientY - start.y; const nxtLong = !long && delta < -100 ? true : long && delta > 100 ? false : long; @@ -71,7 +77,7 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => { className={["popup-wrapper", long ? "long" : ""].join(" ")} style={{ height: height + "px", - transition: !doTransition ? "none" : "margin-bottom 0.5s ease", + transition: !doTransition ? "none" : "height 0.5s ease", backgroundImage: mall.theme.image.backgroundImg ? `url(${mall.theme.image.backgroundImg})` : "", @@ -82,7 +88,10 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => { onTouchEnd={handleTouchEnd} > {floors} -