search

swapnilsparsh / DevEmpire

All in one place where you can find all the resources and details of ambassador/ fellowship, open-source events, web dev sites, games and etc. that are available across different sites.
https://devempire.netlify.app
126 stars 132 forks source link

Add smooth scroll #12

Closed swapnilsparsh closed 3 years ago

tnmyk commented 3 years ago

Scrolling animation?

precious-adeyinka commented 3 years ago

Hey @swapnilsparsh can you provide more description and assign me after the countdown party please? Thanks!

swapnilsparsh commented 3 years ago

Scrolling animation?

Yes, would you like to work on this issue?

swapnilsparsh commented 3 years ago

Hey @swapnilsparsh can you provide more description and assign me after the countdown party please? Thanks!

You have to use smooth scroll npm package as in some devices website is laggy.

precious-adeyinka commented 3 years ago

Sure @swapnilsparsh why not, I want to try, even if I don't have all the details, I will research and read up the docs, so maybe you will have to point me to the specific files to modify and what part of the website needs smooth scrolling alright.

swapnilsparsh commented 3 years ago

Sure @swapnilsparsh why not, I want to try, even if I don't have all the details, I will research and read up the docs, so maybe you will have to point me to the specific files to modify and what part of the website needs smooth scrolling alright.

Sure You have to add a smooth scroll on the full website. Should I assign this issue to you?

Hetu1107 commented 3 years ago

@swapnilsparsh can I try on this ?

Hetu1107 commented 3 years ago

hey @swapnilsparsh i have added that smooth scroll but some problem is occuring like on scroll that back to top component is not showing and also on click explore all button.

swapnilsparsh commented 3 years ago

hey @swapnilsparsh i have added that smooth scroll but some problem is occuring like on scroll that back to top component is not showing and also on click explore all button.

You might have done something wrong, try to rebase the code with the master branch and then check.

Hetu1107 commented 3 years ago

hey @swapnilsparsh i have added that smooth scroll but some problem is occuring like on scroll that back to top component is not showing and also on click explore all button.

You might have done something wrong, try to rebase the code with the master branch and then check.

I have added one commponent named smooth scroll and added below code in it

import { useEffect } from "react"; import Scrollbar from 'smooth-scrollbar'; var options = { damping: 0.07, } const SmoothScroll = () =>{ useEffect(()=>{ Scrollbar.init(document.body,options); },[]) return null }

export default SmoothScroll;

and added smoothscroll comp. in app.js i think the issue is with hash.

swapnilsparsh commented 3 years ago

hey @swapnilsparsh i have added that smooth scroll but some problem is occuring like on scroll that back to top component is not showing and also on click explore all button.

You might have done something wrong, try to rebase the code with the master branch and then check.

I have added one commponent named smooth scroll and added below code in it

import { useEffect } from "react"; import Scrollbar from 'smooth-scrollbar'; var options = { damping: 0.07, } const SmoothScroll = () =>{ useEffect(()=>{ Scrollbar.init(document.body,options); },[]) return null }

export default SmoothScroll;

and added smoothscroll comp. in app.js i think the issue is with hash.

Resolve it by removing the Hash

Hetu1107 commented 3 years ago

hey @swapnilsparsh i have added that smooth scroll but some problem is occuring like on scroll that back to top component is not showing and also on click explore all button.

You might have done something wrong, try to rebase the code with the master branch and then check.

I have added one commponent named smooth scroll and added below code in it import { useEffect } from "react"; import Scrollbar from 'smooth-scrollbar'; var options = { damping: 0.07, } const SmoothScroll = () =>{ useEffect(()=>{ Scrollbar.init(document.body,options); },[]) return null } export default SmoothScroll; and added smoothscroll comp. in app.js i think the issue is with hash.

Resolve it by removing the Hash

ok let me try

B1TSH3LL commented 3 years ago

Can I Try This With Cool Animations :) Please Assign It To Me

swapnilsparsh commented 3 years ago

Can I Try This With Cool Animations :) Please Assign It To Me

Good Luck 👍🏼

B1TSH3LL commented 3 years ago

I thaught it was an HTML page to add smooth scroll i didn't started with NPM yet So Sorry Bro I Cant Work On This . :(

nitinskumavat commented 3 years ago

Do you want the smooth scroll, when we click on the up arrow button which scrolls the page to top

swapnilsparsh commented 3 years ago

Do you want the smooth scroll, when we click on the up arrow button which scrolls the page to top

Want smooth scroll while scrolling the page.

udz-codes commented 3 years ago

Do you want the smooth scroll, when we click on the up arrow button which scrolls the page to top

Want smooth scroll while scrolling the page.

Do you have an example of this? It is not clear that what exactly is the requirement here. I believe that smooth scroll is already implemented when someone clicks on the "Go to top" button. What else is the requirement?

swapnilsparsh commented 3 years ago

Do you want the smooth scroll, when we click on the up arrow button which scrolls the page to top

Want smooth scroll while scrolling the page.

Do you have an example of this? It is not clear that what exactly is the requirement here. I believe that smooth scroll is already implemented when someone clicks on the "Go to top" button. What else is the requirement?

Smooth scroll means there should be a smooth scroll while scrolling any web page on the website.

udz-codes commented 3 years ago

I have implemented this feature using smooth-scrollbar. But, it is a little buggy.

Bugs I have encountered:

  1. Missing Components: When we scroll back up, some of the components disappear and come back on a random amount of scroll ups and downs.
  2. Scrollbar on mobile devices: On mobile, the scrollbar is not working great. The smooth scroll already exists on mobile devices with the default scrollbar and this scrollbar just ruins that effect.

For anyone who wants to implement this feature

  1. What needs to be implemented (according to me, do read feedback of maintainers before working on it) Scrolling must be smooth with the mouse wheel. It is already smooth with laptop trackpads and mobile devices.

  2. You can refer to the content mentioned below.

GIF of implementation for reference

ezgif com-gif-maker

swapnilsparsh commented 3 years ago

@udz-codes That's amazing, can you fix it and open a PR for the same. 😃

udz-codes commented 3 years ago

@udz-codes That's amazing, can you fix it and open a PR for the same. 😃

Bug one can be fixed maybe, but I don't think there is any way to fix the mobile issue as it would be like recreating an existing functionality and making it worse.

swapnilsparsh commented 3 years ago

@udz-codes That's amazing, can you fix it and open a PR for the same. 😃

Bug one can be fixed maybe, but I don't think there is any way to fix the mobile issue as it would be like recreating an existing functionality and making it worse.

Then fix the bug only, I am assigning this issue to you. Good Luck 👍🏼