Android scrolling inside HTML containers, which has a CSS overflow property - javascript

I have a container on a page, which has has a huge overflow-x. On a iPad, the user can simple swipe-scroll left, just like they would do vertically when scrolling down the page.
On a PC, scrollbars are visible so the user can scroll left and right.
However, on the Android, no scroll bars appear and I can't swipe left like I can on the iPad.
Is some special CSS and JS needed here? Does anyone know why this happens?

The overflow property is not working properly in Android devices before Android 3.0. But it is solved from the Android 3.0 or later.
I also had this issue while I was developing an application.
This issue was solved by using a button and animating the element's margin-top property so that it is changed to negative value, therefore creating a scroll effect.

Related

Can web overscroll animations be disabled on a fixed element?

I am creating a progressive web app with Vue, and one of the issues I am running into regards the scroll animations found on (mostly) mobile browsers. IOS has the rubber band effect, and Android recently added something similar.
I am aware that I can turn those effects off entirely, (as described here Take control of your scroll - customizing pull-to-refresh and overflow effects) but that's not what I want. I would like to have these overflow effects enabled, but they should not affect my fixed navigation bar.
As an example, it seems that Pitchfork's review page has a similar issue to the one I am describing (on Chrome Mobile, Android 12). When you hit the top of the page, the bottom navbar dips below the bottom of the screen.
Is there any way to really fix a navigation bar to the bottom, regardless of what scroll animations might take place on the body?

Sidebar menu doesn't show on Safari/IOS

I have a fixed position navbar, and buttons that open a sidebar menu on mobile. Only on IOS and Safari the sidebar doesn't show when you click on cart or account. Obviously, it's some sort of compatibility issue, but how can I work around or fix this?
https://walkpop.com/
I've seen some other threads on StackOverflow say its because Webkit translate doesn't work inside a fixed position parent, so I removed translate all together from my code to avoid rearranging the HTML. Right now I'm using JS to change the left values from -10000px to 0 on click.
This was the code given to me, and it's a pain to rearrange the HTML because of the styling attached to everything.
On desktop and Android, the website works completely fine. Only on IOS and Safari does the sidebar pull out, but you can only see the top bit of the sidebar.
Here is an image of the issue on IOS
This issues was caused because the parent element had a overflow: hidden; attribute. For some reason it was only hiding the sidebar on IOS. Once I removed that line, everything was fixed.

ng-view will not auto hide address/navigation bar on mobile devices

I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.
This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.

jQuery Animate on Android nested div not moving

This issue seems to affect android only.
I'm working on a phonegap App for a client and I have a scrolling area using jQuery animate. However one of the nested divs doesn't move with it's parent div and stays fixed in position.
Again this issue only presents on android devices and works fine in desktop browsers and iOS.
Can anyone shed any light on what this may be?
Seems jQuery animate runs into issues with relatively positioned items, removed relative position and used margin and it seems to work now.

iPhone floating header element like native app

How can i have a section in iPhone web site(header) to remain in a fixed position and rest of the site to scroll(preventDefault or watever) so that it behaves like a native app...any safari api's or javascript that i can use to do this?
I think i found the solution for you: iScroll by Matteo Spinelli (Demo)
The overflow:scroll for mobile webkit.
Project started because webkit for
iPhone does not provide a native way
to scroll content inside a fixed size
(width/height) div. So basically it
was impossible to have a fixed
header/footer and a scrolling central
area. Until now.
If I understand that right you want an element staying at a fixed position? Have you tried creating a div and setting it's css attribute position to fixed? See here: CSS Property Position

Categories