I have vertical scroll bar inside of my web page. When i run this web site in iphone, I have to use two finger to scroll the content. Is there any way to fix this problem? The content needs to be scroll by using single finger.
I have a code like this
<div style="height:600px; overflow:scroll">
Content goes here
</div>
You can use a scrolling library like TouchScroll or iScroll. iScroll has more features, but having tried both in a production application, I found TouchScroll performed more reliably.
Related
I am using iframe-resizer for cross domain application, The Iframe loads fine in desktop and andriod devices but on my Iphone, I am facing below issue:
The bootstrap modal pop ups on Iframe app is hiding and flickering behind when I scroll on page.
I tried
-webkit-overflow-scrolling: touch;
on container of Iframe but that does not work.
Any help/suggestion will be highly appreciated.
We fixed the issue by using position:absolute instead of position:fixed
Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.
Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.
It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.
I use the tinyscrollbar plugin on a site in a couple of sections.
So far, it was working great. But now for some reason, the scroll is avaible with the mousewheel but not with the drag/drop slider..
The resolution i'm using is 1360x768, but I test it in a 1920x1080 and the drag WORKS!
I check with firebug if the problem is an overlapping element over the slider but I can't see anything..
I didn't post any code, because I didn't make any changes on tinyscrollbar.js..
If you upgraded to windows 8 there is a bug where it only registers screen touch instead of both the screen and mouse... so you will need to address that
Check the z-index of the scroll bar element places it ontop of everything else (an arbitarily high z-index is fine for this purpose) as this can sometimes end up behind the custom scroll viewport meaning that when you go to drag the scroll bar you click on the wrong element.
I have turned off horizontal scrolling by using the -ms-touch-action: pan-y; style. However I now have a child div that I need horizontal scrolling on. I have added the style:
-ms-touch-action: pan-x;
This works fine, however it still allows the default behaviors of IE10 to take over, swipe back to previous page etc. Is there a way to get horizontal scrolling whilst preventing the browser actions, or do I need to write a custom scrolling script using the MSPointer events?
Add
-ms-scroll-chaining: none;
to the element that has
-ms-touch-action: pan-x;
http://msdn.microsoft.com/en-us/library/windows/apps/hh466007.aspx
I'm working on webpage for iPhone devices. This page has a div with overflow property set as below to implement native scrolling provided in iOS5.
.nativeScroll {
-webkit-overflow-scrolling:touch;
overflow:auto;
height:200px;
}
With above CSS style, scrolling is working fine. But scrollbar appears only when user touches the div and tries to scroll. Now the problem when untouched the scrollbar disappears which is default implementation. In this case, it looks like the div doesn't have any overflow content. So user may never bother to scroll.
So is it possible to make scrollbar always visible whether or not the div has touch?
Thanks
IMHO, I think there is no "clean" way to do it. But, you can use a third party lib like iScroll.
On the homepage, you can find a reference to the hideScrollbar. Its default value is true. You can set it to false for your needs.
I have a mobile site which I'm testing on the iPhone, and unlike most other sites, I'm not able to hold my finger on the screen to get the 'copy' menu to appear (with the draggable handles to select an area to copy). Nothing happens at all on my site.
I've tried adding the following to my style sheet but it hasn't made any difference:
-webkit-user-select: text;
I should also state that I have the following also in my style sheet and within the page head:
-webkit-text-size-adjust: none;
I've got these as I didn't want the content to be scalable, and just wanted the content to span 100% of the device width.
Would the implementation of any of the above be causing the lack of selectable text on the site? Out of interest, I tried the flickr mobile website which also is not scalable and uses 100% of the device width like my site, and that also doesn't seem to come up with the draggable/select area for copying when you hold your finger on some text.
Does anyone have any idea why this is or how I can make the text content (or any content actually) selectable for copying/pasting?
Thanks
are there any elements that may be obscuring the items by overlaying them, etc? a z-indexing issue, perhaps?