I’d like to create an independently-scrolling section like this, (desktop size only) but use an html element and javascript to simulate overflow-scroll.
Does anybody have any code snippets that do this?
For something simple you can just use position:sticky and no js needed at all.
e.g.
It has to be set up correctly to start with and the structure followed through properly.
I’m more talking about hiding the default scrollbar and using an html element and javascript to mimic the scrolling functionality.
Note in the example the .sidecontent element (only visible on desktop screen widths).
Seems to behave much like the left column in my example except mine is infinitely smoother and simpler.
What do you see that is different apart from the ‘jank’ in your example?
I may have misunderstood what you wanted 
You can change the scrollbar appearance these days but your example looked much the same as the standard version on my mac computer (as mac hides scrollbars by default and overlays them only when needed).
Note your example is completely broken if there is no JS available which is very bad implementation.
You also have to be very careful indeed when messing with something as integral as document or element scrolling as all browsers handle this perfectly for all devices (screen touch and keyboard). If you are going to build your own then it needs to be extremely robust and tested on all devices and in the end it will never be as smooth as the devices own native scrolling.
I’ve never seen a good implementation of this.
1 Like
How often does that happen?
More often than you may think.
I spend six months of the year in Spain on a very very slow connection so disable js quite a lot to make pages load quicker. Not everyone has access to fast internet even in well developed countries. I also disable js to be more secure when visiting links that I don’t know.
That wasn’t really my point though as it wouldn’t have taken much to make that page work without js anyway and shows a lack of consideration and expertise on the developers part.
Some sites obviously require js to function fully but others have sprinkled js on a working page and stopped it working without js.
What is it doing that is not happening in my non js demo (apart from scrollbar styling)? I can’t really see any usable difference but I might be missing something :).
I can’t really think of a case where I can do this without javascript…
This is for a custom Wordpress theme, and I’m not in charge of what other elements might be above the page, or whatever other elements the user might apply, and I think position:sticky doesn’t play nice if a parent element has an overflow property set. Plus, the sidecontent might be shorter in height than the main element, which (I think) means I would need javascript to set the height, anyway.
As for the users without javascript, I’d imagine that it’s more likely for a user to be using a browser that doesn’t support position:sticky than it is for a user to have javascritp disabled.
Hell, web browsing without javascript seems like a lesson in futility in the modern web landscape, since things as simple as opening a mobile popout navigation menu rely on javascript…
Yes that may be a problem with position:sticky if you can’t plan ahead and are trying to stick it into the middle of something else. I’m guessing some of the simpler JS alternatives may suffer from similar problems though as you can’t really isolate elements from the cascade easily unless you are completely controlling every aspect.
Something like the gsap scrolltrigger would likely accomplish what you want and is an in depth animation library.
https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1
There are other simpler ones around and it will probably be a matter of seeing oif something lighter can accomplish what you need.
Alternatively post the page where you are trying to insert a sticky element and I’ll see if its possible with css alone. However if you have a variety of cases then maybe a plugin would be better for you as there are quite a few gotchas with position:sticky.
I have been reading here a lot about a website is broken if it doesn’t work with Javascript enabled. I guess the majority of website out there specially the ones written in React type of development are broken.
Take this forum with disable Javascript. Very bad experience indeed.
Not any more
This is supported in most modern browsers right now.
(You could add a fallback for older browsers using :target if needed.)
As I mentioned above its doesn’t really take a lot more work to make things work for everyone even if they don’t get the same experience. Obviously some things are harder than others and some apps are pure js so you wouldn’t attempt it there but for everyday websites there’s a lot you can do to keep the page functioning for everyone.
This is really what accessibility is about. In the end its a choice you make depending on whether its viable on the medium that you are developing.
As an aside, that example in post #1 is also badly broken if I simply zoom the text size up from the browser controls and then back down again without doing anything else and the whole side column implodes and is unusable unless refreshed. This is why it is so very hard to code these types of behaviours and most implementations are very fragile. That doesn’t mean it can’t be done correctly but it does need some care not to break established behaviour. 