covid19india / covid19india-react

Tracking the impact of COVID-19 in India
https://www.covid19india.org
MIT License
6.86k stars 3.41k forks source link

Custom Scroll Bar #2158

Open soham-dixit opened 4 years ago

soham-dixit commented 4 years ago

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Additional context Custom Scroll Bar GIF

bee-rickey commented 4 years ago

I don't really see any advantage in this.

soham-dixit commented 4 years ago

@bee-rickey Yeah, but just for visual changes.

w3dg commented 4 years ago

i might make this hppen but there are some other ui color changes being done might as well merge this issue with that

balrajsingh9 commented 4 years ago

@debopamgupta @Soham7270 Screenshot 2020-07-03 at 7 40 39 PM Screenshot 2020-07-03 at 7 40 51 PM Screenshot 2020-07-03 at 7 41 00 PM Screenshot 2020-07-03 at 7 41 11 PM

I tried the custom scrollbar thing. It just doesn't look good on light background. Also, I have got it working on Chrome and Safari. Firefox still not working. I have to look into that, but see screenshots for ref.

soham-dixit commented 4 years ago

@balrajsingh9 Firefox doesn't support the full customizations with scroll bar.

balrajsingh9 commented 4 years ago

@Soham7270 It should right check?

soham-dixit commented 4 years ago

@balrajsingh9 Nope, I have also worked on the custom scroll bar, it's totally working on Chrome, Safari and Edge. But not on Firefox. As per my knowledge it isn't supported on Firefox.

balrajsingh9 commented 4 years ago

@Soham7270 After trying for some time and looking here and there on Github, Reddit, and SO, I was able to achieve custom scrollbars on Firefox. I'm running v78, but it should work in v63+

Also in MacOS I had to do Settings > General > Scrolling > Always Not sure if this works in Windows. 😕

Screenshot 2020-07-03 at 8 22 02 PM

Voila 👀 🎊

soham-dixit commented 4 years ago

@balrajsingh9 Awesome! Is it working on all browsers now??

balrajsingh9 commented 4 years ago

So far tested on Chrome, Safari. Although this works on Firefox, but the customization is limited as opposed to the webkit customization for scrollbars.

Let me know if we should proceed with customizing the scrollbars, but I would limit this to dark backgrounds only. @Soham7270

soham-dixit commented 4 years ago

Yeah Firefox' webkit for scroll bar is limited @balrajsingh9

Edit- Maybe we can do a dark black scrollbar for light theme of the site?

w3dg commented 4 years ago

@Soham7270 I agree!

amuagarwal commented 4 years ago

Add the scroll bar to state list rather than page so the map will keep constant and visible on scrolling of state list. Currently when we scroll to last state the maps get invisible. image

Zaman3027 commented 4 years ago

/claim

marootushar commented 3 years ago

/claim

Nirmitjatana commented 3 years ago

/claim