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. :)
Related
I'm developing a website. I have a button that I want to be fixed in the right-bottom corner. The problem is, in mobile browsers, it gets covered by the navigation bar:
The bar sometimes hides while user is scrolling. Can reappear again.
This happens both on Android/Chrome and iOs/Safari.
Is there an elegant way to script the element so it would always be displayed in full and stuck just in the corner of the shown part of the website?
I think the mobile browsers does hides the bar when it is scrolling down and shows it when you scroll up.
Maybe move the location of the button when scrolling up with JS or something.
I am trying to implement an off canvas menu in my Wordpress site. Instructions on coding the menu are taken from this site:
http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html
The problem is that when you open the menu and the mouse is on the menu I cannot scroll the site contents beneath the menu. This is specially important in the mobile version since the menu takes much of the space on the screen so being able to scroll the site contents is very important.
So basically I want the menu to not be scrollable, but the site contents should always be scrollable whether the menu is visible or not.
I fixed it using the javascript fixes mentioned here:
A way to scroll an underlying div when mouse is on top of a fixed div?
#howard-e Thanks for taking the time to look at this.
I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.
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.
I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.