I've been diving some time on css scroll-snap and it works fine but I wanted the scroll-snap to have custom scroll speed in which until now I haven't found any workarounds.
For context, I wanted the scrolling similar to arknights website
Here is what I've tried so far
export default function Home() {
return (
<div className="h-screen w-screen max-h-screen max-w-screen overflow-y-auto snap-mandatory snap-y scroll-smooth">
<div className="h-screen w-screen snap-start">
1st Section
</div>
<div className="h-screen w-screen snap-start">
2nd Section
</div>
<div className="h-screen w-screen snap-start">
3rd SECTION
</div>
</div>
);
}
Is there something I can do to make scroll-snap work like the website above? Or if not possible, any simple implementations/pseudocode for this?
Related
in my nextjs 13.1 website using the new app directory and tailwind css, I have the snap effect on each section of my SPA, with my current code, the snap works, but i then get a second vertical scrollbar. if i remove overflow-y-scroll and put in overflow-y-hidden, of course this does remove the second scrollbar, but then my snap doesnt work. I have tried auto, but cant seem to only have 1 vertical scrollbar with the snap effect. Here is my page.jsx code:
`export default function Home() {
return (
{/* Header in Layout /}
{/ Header */}
{/* Hero */}
<section id="hero" className="snap-start">
<Hero />
</section>
{/* About*/}
<section id="about" className="snap-center">
<About />
</section>
{/* Work Experience */}
<section id="freelance" className="snap-center">
<FreelanceWork />
</section>
{/* Practice Projects */}
<section id="projects" className="snap-start">
<PracticeProjects />
</section>
{/* Skills */}
<section id="skills" className="snap-start">
<Skills />
</section>
{/* Contact Me */}
<section id="contact" className="snap-center">
<ContactMe />
</section>
</div>
);
}`
and if it helps, as an example in every component, generally speaking i have a div wrapping every component with this: <div className=" h-screen flex flex-col relative mx-auto text-center items-center md:text-left md:flex-row max-w-7xl px-10 justify-center">
so not sure if i have to add something to each div to make this work. Thanks!
i tried playing around with different overflows but i couldnt get it to work without losing snap effect
I have been building a responsive Web Application that on loading with an address bar hides the bottom-most navbar. Is there a way to load it with the entire layout?
Here's how it should load:
But here's how it loads on a smartphone:
However, when I scroll a little, it appears exactly as I want it to be:
I have used flex display as shown below: [I am using tailwind along with React JS]:
<div className='flex flex-col justify-around w-screen h-screen align-center'>
{topNavBarprops ? (
<TopNavBar {...topNavBarprops} />
) : (
<TopNavBar headerText={'Unverified Account'} />
)}
<div className='flex flex-col flex-auto max-h-screen overflow-auto'>
{childComponent}
</div>
<BottomNavBar />
</div>
Your body/content div is too tall, likely pushed down by the top navbar, to resolve this, you can set the height value of the body/content div to be calc(100vh - height of navbar here)
I am trying to build a layout that has the following shape:
I am trying to build the layout with tailwind css and flex properties but I can't manage to get the second sidebar right. Either the sidebar scrolls with the content or I cannot scroll the content at all.
My tailwind code roughly looks the following:
<div className="flex">
<div className="h-screen sticky top-0">
{ Sidebar1 code ...}
</div>
<div className="min-h-0 w-full">
<div className="flex gap-x-4 p-5">
<div className="sticky flex-none w-1/5">
{sidebar 2 code }
</div>
<div className="p-5">{content}</div>
</div>
</div>
</div>
I tried playing with overflow properties but cannot get what I want. What am I missing ?
I'm not sure if you meant that the sidebar1 and 2 should always be sticky but I made almost the exact same screen you provided, I added overflow-y-scroll to the content div to it won't overflow
check it here : https://play.tailwindcss.com/SzzWQnn5Fi
In future, it would be helpful to include solutions that have not yet worked.
If I understand your question correctly, you want to make sidebar2 stay fixed in place while you scroll through content. That can be achieved using position: absolute
Positioning with examples is explained here
https://codesandbox.io/s/tailwindcss-react-boilerplat-forked-7yrez?file=/src/components/app.js
im having problems with the styling in my Accordion Heading.
I set my Accordion Contents like this:
<Accordion
heading1= { <DishItem name="Döner Teller Spezial" price="13,60€"/> }
content1= { <AccordionContent /> }
</Accordion>
However, the way my flex-row is styled within my DishItem component (working without issues on other places, or tested by itself on tailwindplay.com) seems to break within the Accordion Heading and im not sure how to fix it.
This is my DishItem Component:
<div className="w-full">
<div className="flex flex-row py-2 bg-white">
<div>
<p className="pl-2 leading-none font-lato">{props.name}</p>
<p className="pl-2 text-base leading-none"> { props.zusatz }
</div>
<p className="m-2 ml-auto place-self-center"> 24,50€</p>
</div>
</div>
This way of pushing the last flex element to the end of the container worked fine, but not within the heading. I am new to using materialUI and would appreciate any help to fix this.
The problem mostly comes from:
<AccordionSummary aria-controls="panel1a-content" id="panel1a-header">
<Typography className={classes.heading}>{props.heading1}</Typography>
</AccordionSummary>
Typography adds a <P> tag to your content and that's making it impossible for you to stretch the content. You could also make your life much easier by using the <Grid> component from Material-UI.
See my sandbox: https://codesandbox.io/s/tailwindcss-react-boilerplat-forked-5yv3w?file=/src/components/Accordion.js
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16