From 91f8a0b9d573b6a5231d592fd7a4911da7c0cfcf Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Sun, 5 May 2024 16:24:24 +0800 Subject: [PATCH] feat: update --- src/components/HomeIndex/index.tsx | 60 ++++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 8 deletions(-) diff --git a/src/components/HomeIndex/index.tsx b/src/components/HomeIndex/index.tsx index c53a59c..27c0182 100644 --- a/src/components/HomeIndex/index.tsx +++ b/src/components/HomeIndex/index.tsx @@ -17,7 +17,12 @@ const HomeIndex: React.FC = () => { r: -8, h: 160, w: (el: any) => { - return Math.max(320, el.parentNode.offsetWidth * 0.55) + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(320, width * 0.55) }, }, @@ -29,7 +34,12 @@ const HomeIndex: React.FC = () => { r: 15, h: 360, w: (el: any) => { - return Math.max(220, el.parentNode.offsetWidth * 0.3) + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(220, width * 0.3) }, }, @@ -41,7 +51,12 @@ const HomeIndex: React.FC = () => { r: 6, h: 300, w: (el: any) => { - return Math.max(330, el.parentNode.offsetWidth * 0.55) + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(330, width * 0.55) }, }, @@ -53,7 +68,12 @@ const HomeIndex: React.FC = () => { r: -5, h: 400, w: (el: any) => { - return Math.max(305, el.parentNode.offsetWidth * 0.45) + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(305, width * 0.45) }, }, @@ -65,7 +85,12 @@ const HomeIndex: React.FC = () => { r: -20, h: 525, w: (el: any) => { - return Math.max(160, el.parentNode.offsetWidth * 0.3) + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(160, width * 0.3) }, }, @@ -77,7 +102,12 @@ const HomeIndex: React.FC = () => { r: 10, h: 160, w: (el: any) => { - return Math.max(320, el.parentNode.offsetWidth * 0.55) + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(320, width * 0.55) }, }, ] @@ -137,7 +167,14 @@ const HomeIndex: React.FC = () => { }) gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], { - width: (el: any) => el.parentNode.offsetWidth * 0.26, + width: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return width * 0.26 + }, scrollTrigger: { trigger: '.scroller', start: 'top 80%', @@ -157,7 +194,14 @@ const HomeIndex: React.FC = () => { }) gsap.from('.card--two .card__avatar', { - width: (el: any) => Math.max(330, el.parentNode.offsetWidth * 0.55) - 32, + width: (el: any) => { + let width = el.parentNode.clientWidth + + if (width < el.parentNode.scrollWidth) { + width = el.parentNode.scrollWidth + } + return Math.max(330, width * 0.55) - 32 + }, borderRadius: '12px', height: 'calc(300cqh - 2rem)', scrollTrigger: {