How to manage scrollbars as we want - javascript

In the website I am currently creating, I am using Angular 8 (not sure whether the component paradigm has an influence on my troubles with scrollbars).
Like most websites, I need to implement a scrollbar in case the data does not fit the screen. But as I added more and more components, I realized that the way I used scrollbars was confusing and I ended up not being able to implement the behaviour I wanted.
I looked on the Internet but most ressources explain how to customize scrollbars, which is not what I am looking for. The article explaining the few CSS overflow properties were not very useful as well, because I did not have what I wanted, even though I kind of have tried every possibility (at least most I could think of).
Do you have any piece of advice to manage scrollbars ? Good practices & so on.
Currently the behaviour I am trying to implement is the following :
I have a home component containing a navbar and a router-outlet. The navbar is actually overflowing (because of box-shadow and an icon).
The router-outlet contains (if on the right page) a sidebar on the left side which represent a list of emails, and the content on the right. I don't want a global scrolling because I would have a empty space above the sidebar (where the navbar should have been but is gone because of scroll). I would need a scroll for the sidebar, and a scroll for the content.
So if you have any ressource which could help me understand how to use these scrollbars and manage them elegantly, that would be super appreciated :)

Try this perfect-scrollbar which is used for Angular 8.

Related

Sticky Sidebar Jitters on Scroll

I implemented a sticky sisebar library that aims to be easy to use as you are free in setting up the sidebar and its CSS. The library only gives you an additional value as custom property (--push-down) you can use in CSS to push the sidebar to its current position.
The problem I'm facing is that the script causes massive jitters in the sidebar position on some devices. These do only occur on the first scroll - if you've scrolled through the site once, it's working fine.
I would like to know why that could be the case (and if it's possible to be fixed. If not I still want to find out what's happening here.)
Using throttle functions does not make a difference here, as described here: https://stackoverflow.com/a/44779316/6336728. I'm already using the suggested method of doing layout read on scroll and layout write with requestAnimationFrame.
I put the code of my GitHub repo in this CodePen to try it out quickly; only the JS part is relevant.

mobile swipe navigation examples

Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu

horizontal scrolling carousel

Never good to start off with an apology but please allow me to apologise for the terrible title of this post and also apologise for asking a question which has no doubt been asked countless times before. However, as I couldn't think of an appropriate title for this post you can image how well my searching went.
I'm looking to replicate the scrolling effect on the fitbit website where the section starts with "Get energized, take charge."
I have a rough grasp of what is happening here but don't have the smarts to piece it all together.
User scrolls page to this div.
JS calculates scroll position of this div and sets a class on the parent div which changes its state to fixed.
Child divs are now scrollable due to the change of state.
JS knows position of last child div, and when its at the top of the parent div, it removes class from parent and allows rest of the page to scroll normally once again.
I think I can calculate the second bullet point using something like
$(window).scrollTop()
And I can toggle the class on the parent easily enough. What I'm struggling to grasp is how the JS knows that the last child div has been scrolled and then organising that within the function to remove the class from the parent.
Any help would be greatly appreciated.
As a side note, I'm already using jcarousel on this project and if I could reuse existing code that would be great but I don't even know if this plugin can handle what I'm looking for.

McMaster-Carr's 'scrolling box' layout

McMaster-Carr, a few years back, completely redesigned their website and they now have these very cool 'scrolling box' sections for each product. I've been trying to duplicate that same effect only using css and html, but have had no luck so far.
Some key things I cannot accomplish using only html + css:
hidden scrollbars with the ability to still scroll
section headers that stop when scrolled to the top of a containing div
I've tried looking through their source code but I really want to start from scratch and recreate the effect, hopefully finding a much simpler way to recreate it.
If anyone has seen anything like this before or knows how to go about creating this type of layout, please help.
Here's a link to a page on the McMaster-Carr website that demonstrates that scrolling box layout:
http://www.mcmaster.com/#nylon-gears/=g1p46z
The technique j08691 linked to is the common way to do it - you'll have to use a bit of JS to find out where how much the site is scrolled. If you look at the source of the persistent header example, there is a line like
scrollTop = $(window).scrollTop()
simply replace this by the top position of your parent div (assuming it is, like in McMaster, fixed on the site)
scrollTop = $("div.MyParentDiv").position().top

Page displaying sections using opacity, following #section and then do Javascript ScrollTo(0,0)

Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.

Categories