I am lacking of a better term to describe this UX. It is basically a content container that is scrollable. Depending on the scrolling position, the top or bottom edge of container would light up (or change style) to indicate there is content at either of the direction. For example, when you go to Yahoo.com, and scroll down a little, the top edge of the scrollable section would turn purple, indicating there is content at the top that's outside of the viewport. (See image below)
I wonder if there is already some well known script library that can achieve this so I don't have to reinvent the wheel.
This is a fairly custom concept, but you can see how to get started by looking at the way Bootstrap's Affix method works: http://getbootstrap.com/javascript/#affix
Essentially you will need to have a scroll event listener which tracks what the position is that a user is scrolled on a container. When the scroll position reaches certain breakpoints, the listener function will trigger CSS classes which may do a variety of things.
Related
I'm looking to create a blog page similar to stripes documentation. When the user scrolls the page, I would like to trigger different highlights on the code. Check out stripes documentation here and see that the code gets highlighted based on the content when you scroll. Is there a library that does this already, or what is the best approach to tackle this myself?
It's basically a combination of a sticky element (the code container) and linking the scroll position with css styles using JavaScript.
Here you can find more information and a nice demo for such purposes: Scroll and let content stick while animating
To sum it all up, the mechanism of how it works is really just:
1. A scrolling container
2. position: sticky;elements
3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements
4. (Sometimes) CSS transition property
Now I’ve seen this page from webflow, which has inspired me much.
In this page, you start scrolling horizontally, then when you reach a certain area, the scrolling direction changes so that the page starts scrolling vertically.
Is there a way to do this?
(Preferably vanillaJS, but jQuery would be fine)
Basically there is not a set-up solution built into standards or jQuery (and I don't really recommend to use jQuery). I haven't searched if there is a library to do this (I suspect there is, and you should use one if possible instead of building by hand) but I'll try to roughly explain what it uses in vanilla JS/CSS.
We can construct a really long element (that includes the contents you want to reveal by scrolling), and use some cropping mechanism so that only a portion of it is displayed. This is basically done with overflow: hidden;.
Next this long element should move with scrolling. Adding an onscroll event listener that adjusts the transform property (spefically, translate functions) would do that.
These element should behave magically: they scroll to a position, stop and stay there until they reach another scrolling position, where they continue to be scrolled away. This is accomplished with the position: sticky; CSS property. See what MDN says:
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This is somewhat hard to understand but the key is that it stays where it is as if it was a normal element until reaching the position you have set through top/bottom/left/right properties. Then it stays at that position until it's scrolled away together with its parent element (the "nearest scrolling ancestor").
So now you have an element that
Is really long but has only a portion shown
Can move as mouse scrolls so that users see more as scrolling
Stays in a fixed position through a part of the page and then scrolled away
which is basically the effect you want.
These three steps are the basic building blocks of such fancy effects you mentioned. There should be of course many nasty implementation details that I haven't outlined here but I hope this answer help you briefly catch what's happening under the hood.
I would like to implement a split "viewport" and i'm wondering if it is possible in javascript/css/html.
What I mean is, a scroll area that scrolls similar to a book, where the content that overflows vertically on the left half is shown in continuation on the right. Similar to CSS columns but for a scroll area.
I've played with the idea quite a bit, and the only solution I can think of is to essentially duplicate the content in the left pane in the right pane, synchronize the scroll event, and offset the right area by the element height.
Here is a basic example I made:
https://amazing-thompson-651a40.netlify.app/
However, I'm wondering if there is a solution that doesn't require duplicating the DOM structure of the left pane onto the right. For example is it possible to access the view port/rendering engine directly and show what is "actually" overflowing the scrollarea, and offset it on the page?
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I'm building a web app that has a grid of many small scrollable divs (actually, Ace editors), and this grid has enough elements that it is larger than the window. When a user begins scrolling over empty space, I want them to be scrolling the window itself; when a user begins scrolling inside a grid element, I want them to scroll the div contents there. The thing is, if a user begins scrolling over empty space, and then scrolls such that their mouse goes over a grid element, that scrollable div captures all the scrolling events, interrupting the user's flow over the grid and "trapping" them inside the grid element.
I can't manually capture onmousewheel events, since AFAIK there's no way to capture horizontal mouse wheel movement separately from vertical, and I want users on Mac OS X to be able to scroll in all directions. I've thought about using JS to add an invisible div with a very high z-index on the first onscroll event, and removing it as soon as onscroll events aren't triggered for a certain period of time. Haven't yet coded this up, but I'm wondering if there's a better solution, or if there are any potential pitfalls that I haven't thought of. Any help or advice would be great! Thanks!
I think a solution for this would be incredibly difficult due to browser support, and the actual solution, which would probably be something like calculating the scroll, backtracking the div, and applying the scroll to the page.
You could do something like this:
$('div').scroll(function(e){
// figure out how much it has scrolled
window.scrollBy(0,howmuch);
});
I don't recommend this solution in the slightest though, I think the better option would be to set the divs to overflow:hidden; and pick up a solid scroll plugin, and use that to customize the scroll behavior on the divs.