We all know the 100vh jump on mobile browsers (CSS3 100vh not constant in mobile browser)
In order to prevent that from happening, I wrap the pages scrollable content in a separate div, which works great!
But I still need some fixed elements.
When you now hover the fixed elements and try to scroll, the scroller-div doesn't get scrolled, like body would have with "normal scrolling".
This is obviously really bad and can't stay like this.
It doesn't seem to matter if the fixed elements are siblings, predecessors or ancestors to the .scroll-wrapper. As far as my understanding goes whenever you hover a fixed element and scroll, the browser wants to scroll the fixed elements contents and the scroll-wrapper.
My ideas so far:
Either get a new solution for keeping the address bar from sliding away on scroll.
Or somehow scroll make the browser ignore the attempt to scroll the fixed element and instead scroll the element underneath it, while keeping the fixed element hoverable and clickable.
Or somehow pass on the mousewheel DOMMouseScroll etc. to the .scroll-wrapper
route 2. doesn't is not so promising and I just can't find anything to make route 1. happening, so .. any ideas on how to accomplish the 3. option?
Here is a CodePen to illustrate the problem. https://codepen.io/katerlouis/pen/LQeNbN
strange.. just when the text and CodePen were finished, I found a solution as a suggestion – How to scroll a scrollable div when scrolled on other, non-scrollable div?
solution 3. is possible!
the key is to grab the e.deltaY from the wheel-event on the fixed-elements, and add this to the .scroll-wrapper. If you want to do it with jQuery, the deltaY is "hidden" in e.originalEvent
$(".fixed-element").on("mousewheel DOMMouseScroll wheel MozMousePixelScroll", function(e) {
e.preventDefault();
$(".scroll-wrapper")[0].scrollTop += e.originalEvent.deltaY;
})
Related
I have a fixed element which covers the entire screen and need scrolling.
IOS has what people call 'rubbing banding' for an example of this behavior you can take a look at these gifs:
http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/
The problem is that when rubber banding occurs and pulls my fixed element down(revealing the content it overlays) there is a chance a users finger might end up on the content which is being overlay-ed.
When this happens all touchmove event will trigger not on my fixed element that covers the screen but on the body that my fixed element is overlaying.
I know you can prevent the body from scrolling in a maner like this:
body.noscroll{
position:fixed;
overflow:hidden;
}
But this is a solution to prevent scrolling.
This is not the solution because once the touchmove event has triggered on the overlay-ed content once, it will only stop if a user removes their finger from the screen.
In short a user might scroll my fixed element, reach the top making the rubber banding kick in and swipe on the body instead of the fixed element because the rubber banding reveals the body.
Even if the element pops back into place after the rubber banding has taken place the touchmove event is still stuck on the body element until the user removes his finger from the screen.
I am pretty lost on what to do here. Somehow disabling the touchmove event for the body seems like a good idea but my fixed element is inside there and it still needs scroll abilities.
Any thoughts or tips on how to handle this?
Edit:
A simply jsfiddle:
https://jsfiddle.net/pq88zLLx/1/
This only works on IOS though and only if you swipe into the content that the rubber banding is revealing.
There really is not a good solution for dealing with a fixed element that has scrolling inside of it on mobile browsers.
I have not tested other browsers besides Safari but I've learned that other browsers are not too fond of this combination either.
The best and most flexible solution is to make your full screen elements absolute positioned. This will fix common issues with swiping and positioning.
But what if my element is in a relative container?
Then you are out of luck and need to grab your element, remove it from the dom and place it up as high in the dom as you can when you are opening your fullscreen element.
Afterwards you need to place your element back in it's original position. They best way I know of to do this, is to leave behind a placeholder for you to append/prepend to. The dom has no method your giving you the exact location of an element therefore if you don't want the order of elements to change you are forced to do this.
Feel free to leave comments or suggestions on this answer if you feel like improvements can be made.
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.
Have a site with MANY horizontally scrolling DIV containers. On one of the containers we want it to scroll to a certain position onLoad. Recommendations to what the best solution is?
To complicate it a little more, the container is vertically far down (i.e. below the fold) on the page and would rather not have the onLoad result in having the page scroll vertically down to this container, merely have this specific container scrolled horizontally and nothing else. Is this also possible?
Many thanks.
You can use the scrollLeft property for this.
http://jsfiddle.net/v6EwS/
document.getElementById('foo').scrollLeft = 500;
I want a html div which will scroll when user scroll down the page and it will get to fixed position when it's parent tag ends. For example:- See this link http://www.9gag.com/ they have alot to posts on one page. When we scroll one post and go to end of the first post, the title and share buttons become to fixed position and then the second post do the same and same for the next posts. Just exactly like that. How can we do this in Jquery or raw javascript or in css.
Maybe you want to try this plugin: http://labs.anthonygarand.com/sticky/ Sticky is a jQuery plugin that gives you the ability to
make any element on your page always stay visible by making the element to be floated when they has reached the limit.
$(window).scrollTop() will give you the number of pixels scrolled down in the browser, $('postcontainer').offset() will give you the x,y positions of a post container.
So if you bind an event to $(window).scroll() or to the mousescroll, you can check if the postcontainer's offset().top is less than the window.scrollTop. If it is then you start moving the item down relative to the post container. When doing this you need to keep track of the post container's height and the moving element's height to make sure it doesn't go down past the bottom of the container.
So if postcontainer.height - movingelement.position().top >= movingelement.height() then you need to fix the position of the moving element. Do the opposite while scrolling back up.
Hopefully this will get you thinking and starting to kick out some code.
This is the solution for your problem with a simple css property.
use position:sticky to follows the scroll.
Here is the article explained.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
with sticky position demo
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.