Skip to content

Commit

Permalink
update scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
Shuya Yang authored and Shuya Yang committed May 4, 2024
1 parent e22be78 commit 5c2cc71
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 16 deletions.
39 changes: 25 additions & 14 deletions src/components/ProgramsSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,24 +92,38 @@ const ProgramsSection = () => {

useEffect(() => {
if (logoContainerRef.current) {
const totalWidth = Array.from(
logoContainerRef.current.children
).reduce((acc: number, child: HTMLElement | Element) => {
if (child instanceof HTMLElement) {
return acc + child.offsetWidth;
}
return acc;
}, 0);
const totalWidth = Array.from(logoContainerRef.current.children).reduce(
(acc: number, child: HTMLElement | Element) => {
if (child instanceof HTMLElement) {
return acc + child.offsetWidth;
}
return acc;
},
0,
);

logoContainerRef.current.style.width = `${totalWidth}px`;
}
}, []);

return (
<div id="program" className="px-36 mt-0 flex flex-col items-center text-lg relative" style={{ backgroundColor: "#1D0F741A", height: "300px", overflowX: "hidden" }}>
<div className="text-center text-gray-600 py-4 mt-8">We Are Trusted by</div>
<div
id="program"
className="px-36 mt-0 flex flex-col items-center text-lg relative"
style={{
backgroundColor: "#1D0F741A",
height: "300px",
overflowX: "hidden",
}}
>
<div className="text-center text-gray-600 py-4 mt-8">
We Are Trusted by
</div>
<div className="viewport">
<div ref={logoContainerRef} className="logo-container relative overflow-hidden">
<div
ref={logoContainerRef}
className="logo-container relative overflow-hidden"
>
{logoList.map((logo, index) => (
<div
key={`${logo.alt}-${index}`}
Expand Down Expand Up @@ -139,6 +153,3 @@ const ProgramsSection = () => {
};

export default ProgramsSection;



2 changes: 0 additions & 2 deletions src/components/programscrolling.css
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,3 @@
width: 100%; /* Set the width of the viewport to 100% */
overflow-x: hidden; /* Hide the overflow */
}


0 comments on commit 5c2cc71

Please sign in to comment.