I want to get the similar behavior for my header in HTML page as in ios google chrome's header: when user start to scroll to the top (from any place of the page) of the page header appears as if it was sitting just above. And when user is scrolling to the bottom - the header just keeps it's position and slides up.
I added a 'touchmove' event to capture scroll coordinates, and can log it in some div just to check if it is working and seems like it's working fine, except for header's position is not updating while scrolling. Once scroll has stopped header's position updated as expected.
So my question: is it possible to update an element while user is scrolling?
I would prefer to not change to scrolling the content of the element (instead of scrolling the page itself).
Seems like no workaround, from Jquery.mobile page:
Triggers when a scroll begins. Note that iOS devices freeze DOM
manipulation during scroll, queuing them to apply when the scroll
finishes. We're currently investigating ways to allow DOM
manipulations to apply before a scroll starts.
Do you by any chance have some code we can look at?
Although, if you're using jQuery, check out this plugin: http://wicky.nillia.ms/headroom.js/
It provides the functionality you are looking for.
Related
I am looking for a CSS solution to implement the exact behavior of "overscroll-behavior: contain" but for when the target element has no overflow.
I have a page with a pop-in sidebar/menu that, on mobile, takes up 100vw and 100vh (minus bottom navigation bar) and does not overflow (there is not enough content to need scrollbars). Currently when this sidebar is open on mobile, if the user tries to scroll it, the main page in the background scrolls, which in this app can result in unwanted database calls due to lazy loading/infinite scroll.
Here is a minimal codesandbox demo:
On line 55 of demo.js I have added the overscrollBehavior: "contain" property to the JSS, but as you can see, it does not contain the scroll chain, unless you shrink the vertical height of the browser to force the content of the sidebar to overflow first. (On Chrome the overscrollBehavior seemed to have the expected behavior in the codesandbox editor, but not when popped out in its own window.)
Surely there is a CSS solution to get this behaviour without the element having to be scrollbable first?
Interestingly, on Firefox at least, if you shrink the vertical height to force scroll on the side bar, once you resize the browser back to normal, the overscroll-behavior property continues containing the scroll chain until you refresh the page, which is the behaviour I'm looking for, though obviously on initial page load.
Here is a simple codepen showing the difference in overscroll-behavior for elements which do and do not overflow, if it's not already clear. I also found another post on the CSS Tricks forum from 2018 of someone asking about this behaviour, but with no solution.
I am trying to make a similar offcanvas element in one of my projects. I found few examples, but since I am using bootstrap 3 I went on with this one: http://getbootstrap.com/examples/offcanvas/ I replicate it in my project, but instead of the toggle button on mobile I use Hammer.js like this:
Hammer("body").on("hold", function() {
$(".row-offcanvas").toggleClass("active");
});
The tricky part is that whenever my content inside the visible div, is shorter than the div containing the list of links (on the right) the page is scrolling. Once I add more content to the visible div, I do not get any scrolling and everything works as it should. I made a simple example here http://florin-cosmin.dk/offcanvas/index1.html , but it can only be tested on mobile, if you really want to see the scrolling (just HOLD not click anywhere in the body). The working example is here: http://florin-cosmin.dk/offcanvas/itworks.html
I tried to set overflow-x: hidden on the visible div, but that doesn't help.
Again, how can I remove scrolling on mobile even when the content on the left is shorter than the one on the right side?
It is very frustrating. Please help :)
UPDATE: I am testing it on default Android browser on 4.3 and 4.1.2. I need to use the default browser as my Android app uses a webview.
Here is the web site: plantcatching.com
Set "Montreal" in the search textbox and hit Enter. The map should go there and show results (after you zoom in one notch I think). A panel will slide from the left for the list of results. This panel has a white arrow attached so that it's possible to collapse/expand it. Here is what happens:
On IE/Firefox: the panel slides well.
On Chrome: the first time the panel extends, it works well. Then any
new manipulation shows the issue. The content of the panel and the
tabs will change position only after the jquery.animate("left") is
finished.
I let you have a look at the css structure under firebug or other dev bar, but basically it seems that chrome doesn't like the various "position:relative" css rules inside the panel. The problem is that I don't control them. They are set by the mCustomScrollbar jquery plugin. To check that this is the actual reason, just zoom out a little until a small window appears notifying that you should zoom in again. This empties the content of the pane and collapses it. See how it closes nicely this time, since there is no content anymore in the pane.
The question is: how should I modify the css (the part I control) so that it works well in Chrome and continues to work well in other browsers?
Let me know if something is unclear, I will update this question.Thanks for your help.
There was no answer here, so I decided to fix it myself by adopting css3 transitions on chrome only. This is now far better but you will notice that the tabs are a bit lagging when the panel slides. This does not happen in non webkit browsers.
I ran across a very strange behavior when injecting a container with the css attribute -webkit-overflow-scrolling dynamically and thought I'd ask for your thoughts/ideas.
Through AJAX I'm querying additional data and once processed add it to the DOM. However, when accessing the page the very first time (cleared cache) the container adds fine, but I cannot scroll! Refreshing the page through mobile safari reloads everything and suddenly the container scrolls...
There's no additional JS involved so I'm wondering why it would scroll the second time the page is loaded... Anyone have a take on why this could be?
Thanks, guys!
probably because the page has not adjusted to the new content, you could just add overflow-y: scroll to the element which you will be adding content to, so that it always scrolls. Or add this when you add the new content.
I have a series of scrollable divs on a page. When a DIV gets scrolled to say the top and the user keeps scrolling it starts to scroll the page up instead (not so much on Firefox) but on Safari and Chrome it does.
This is annoying, and I notices that on Facebook, the activity monitor, friends online and chat window do not do this. If your mouse is in the div the you can only scroll that div not the page when you reach the top or bottom.
How have they done this?
Marvellous
Facebook use a custom scrollbar instead of those that come with the browser (at least, for the friends online sidebar).
Custom made controller = custome made control. :)