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
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 have noticed on certain websites that are implemented as a single page and free scrolling view in browsers that when you trigger a pop-up or modal window a second scrollbar appears to allow the user to scroll through the content of the window. The primary scrollbar is also active but not very effective since the pop-up or modal window blocks out most of the screen.
I cannot imagine that this implementation approach would have very strong usability reasons, so I was wondering if there is a valid technical reason or constraint. But if there is a valid argument from a UX design perspective then I am also interested in finding out the rationale behind it.
When content overflows (too big to fit in the container element), the browser adds a scrollbar. Looks like in your case, the modal is taking up 100% width/height of the viewport, but it's still too small to fit all the content, hence the vertical scrollbar.
To get rid of the scrollbar, people usually add overflow: hidden on the element which hides the scrollbars, but also doesn't allow the user to scroll. This is fine if the content is not important... such as a graphic that's meant to be a background image or something of that sort.
It's poor design in my opinion. If there is enough content that the user will have to scroll to see it, there's no reason to put it in a modal. If you have a modal, keep it small. In some cases where it's necessary though, you can hide the main scroll-bar when the modal is in view.
At present, when a page is scrolled on Safari iOS 7 (11A4449D) the header chrome reduces in size and clicking anywhere in the bottom 44px of the viewport brings in the footer grey bar (with the next/prev page links etc).
Conversely, scrolling back up the page keeps the footer bar in place and the header bar at the larger size. Is there any meta-tag (or similar) in place to prevent this behaviour of make it consistent on both scroll-up and scroll-down?
We could work around the issue if the browser fired some JS event when the chrome came into/out of view but it doesn't.
Just as an update to this:
We eventually worked around this issue by using bottom: 0; instead of top: 100%; in the CSS. We had wanted to use top: 100% in the first instance as it meant that items being added into that element would be rendered down (off screen) automatically.
By taking the inverse approach we just have to manually translate the area off (using JS) an equal amount as the item being added.
This results in out 'sticky' footer staying above the bottom piece of OS chrome when that appears.
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 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.