i use sticky-scroll & my chrome browser show section's scrollbar how can i hide this ?

[akshaydobariya]

html,body{ / Hide both horizontal and vertical scrollbars / / WebKit (Chrome, Safari, etc.) / ::-webkit-scrollbar { display: none; }

/ Firefox / scrollbar-width: none; -ms-overflow-style: none; }

[jxshnpreet]

Try Using This

"use client"; import React, { useRef } from "react"; import { useMotionValueEvent, useScroll } from "framer-motion"; import { motion } from "framer-motion"; import { cn } from "@/utils/cn";

export const StickyScroll = ({ content, contentClassName, }: { content: { title: string; description: string; content?: React.ReactNode | any; }[]; contentClassName?: string; }) => { const [activeCard, setActiveCard] = React.useState(0); const ref = useRef(null); const { scrollYProgress } = useScroll({ // uncomment line 22 and comment line 23 if you DONT want the overflow container and want to have it change on the entire page scroll // target: ref container: ref, offset: ["start start", "end start"], }); const cardLength = content.length;

useMotionValueEvent(scrollYProgress, "change", (latest) => { const cardsBreakpoints = content.map((_, index) => index / cardLength); const closestBreakpointIndex = cardsBreakpoints.reduce( (acc, breakpoint, index) => { const distance = Math.abs(latest - breakpoint); if (distance < Math.abs(latest - cardsBreakpoints[acc])) { return index; } return acc; }, 0 ); setActiveCard(closestBreakpointIndex); });

const backgroundColors = [ "var(--slate-900)", "var(--black)", "var(--neutral-900)", ]; const linearGradients = [ "linear-gradient(to bottom right, var(--cyan-500), var(--emerald-500))", "linear-gradient(to bottom right, var(--pink-500), var(--indigo-500))", "linear-gradient(to bottom right, var(--orange-500), var(--yellow-500))", ]; return ( <motion.div animate={{ backgroundColor: backgroundColors[activeCard % backgroundColors.length], }} className="h-[30rem] overflow-y-auto flex justify-center relative space-x-10 rounded-md p-10" ref={ref} style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}

{content.map((item, index) => (

))}

<motion.div animate={{ background: linearGradients[activeCard % linearGradients.length], }} className={cn( "hidden lg:block h-60 w-80 rounded-md bg-white sticky top-10 overflow-hidden", contentClassName )}

{content[activeCard].content ?? null} </motion.div> </motion.div> ); };

export default StickyScroll;