I am developing a site where I disabled regular scrolling simply using overflow: hidden; so the user has to click through the nav to interact with each part. I was testing the mobile view on an iphone X using safari and discovered you can bypass that using two finders to scroll. Is there a CSS or JavaScript workaround to disable that function?
Use overflow: clip instead of overflow: hidden;. As explained in MDN:
Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
Related
my web application has an and a SideNav (left) and horizontal Navigation on top.
The height of the is always based on the height of the loaded content. I have a "resizeMe" function for that.
But now I have the problem that the scroll bar flickers briefly when loading (of the iFrame) and then disappears again. Is there a way to make the scrollbar disappear by default in IE11?
I have already tried the following attributes on the :
<iframe name="Source"
id="Source"
src=""
frameborder="0"
scrolling=""
style="height: 905px; overflow: hidden; -ms-overflow-style: none;"
onload="resizeMe()">
</iframe>
height is calculated
Thanks! :)
I am having a site, which embeds another page,whose scrollbars are hidden and even do not show in IE 11(while loading). And the codes, I have used in the embedded site are:
scrollbar-width:none;
-ms-overflow-style:none;(You have used this, try the others)
::-webkit-scrollbar{width:0}You have used overflow:hidden; which not only hides the scrollbar but also disables scrolling, so using -ms-overflow-style:none; would be useless if you want to disable scrolling as you have already used overflow:hidden;. And the above codes hide the scroll-bar, but enables scrolling(unlike overflow:hidden;)
I would recommend you, that if you have embedded a site, which is owned by you, then try putting these codes in your embedded site. And I do not think that scrollbar style of iframe will be followed in major browsers according to this Stack Overflow answer.
I've been using scrollIntoView to replace old jQuery animate. It works perfectly everywhere I need but Chrome Android.
The target element is inside an element with an overflow: auto;
The behavior expected is to scroll inside the overflowed element, but on Android, it will also scroll the documentElement even if html and body have an overflow: hidden;
I've made a codepen to reproduce the problem.
Did someone know a workaround?
Page scrolling using the keyboard (PgUp/PgDown, Space) sometimes gets difficult if there are elements with fixed positions at the top of the page, e.g. navigation bars: content that was not visible at the bottom of the viewport might be hidden by the fixed elements after scrolling.
How to address this problem? Do browsers calculate, how far they should scroll? I observed different behaviors for different browsers and also for the same browsers on different pages (for example, Firefox leaves about 80px of old content on http://www.sueddeutsche.de/, but far less on http://www.taz.de. Chromium leaves much more content.).
Is this a problem at all, i.e. does anybody beside me use the keyboard to scroll a web page? Do you know any statistics?
To illustrate the problem, I created a Fiddle:
https://jsfiddle.net/x7hj8c4m/
Try to scroll the content using Space on Firefox. The fixed element will cover text that was not yet visible before scrolling. If you add left: 0, it works.
Very interesting observation.
Firstly, pressing space is equivalent to pressing PgDn. And when PgDn is pressed, the page should scroll vertically by roughly "one page's worth of px". As shown by the OP's fiddle, Firefox in particular calculates this value differently, depending on whether it detects a fixed header.
From my own tests on IE, Chrome, Firefox, I deduced that:
Without a position: fixed element, Chrome and IE scroll down by ~87.5% of the document height; Firefox scrolls down by document height - scrollbar height - ~20px.
With a position: fixed; width: 100% element at the top-left of the screen, Firefox intelligently understands that the element perceptually reduces the document height, and so applies: document height - scrollbar height - fixed element height - ~20px. The condition appears to be quite specific: the element must be fixed exactly at the top-left of the document's box model with full width in order for it to work. The other browsers (Chrome, IE) don't perform such compensation, and performs the standard 87.5% scroll.
I don't know if this is relevant, but it might have something to do with support for position: sticky.
Scrolling by keyboard is a pretty basic behaviour that probably doesn't interact too much (if at all) with the DOM, so expecting it to account for fixed elements is probably too much. There seem to be browser-specific predefined increments (I have no idea if or how they can be customized), but note that the increments are usually smaller (presumably small enough) when you use the up/down arrow keys.
Is it possible to show the scroll bar in dojox mobile when the page is viewed from desktop browser?
This is my scrollablePane in which i want to show the scrollbar
<div id="resultViewScrollPane" data-dojo-type="dojox/mobile/ScrollablePane">
<div id="resultViewContentPane" data-dojo-type="dojox/mobile/ContentPane"></div>
</div>
To show the desktop browser scrollbar, you can override the overflow: hidden statement in dojox/mobile/themes/*/ScrollablePane.css in your own stylesheet:
.mblScrollablePane {
overflow: auto !important;
}
However, I don't think this is what you're looking for, as the client scrollbar seems to be pretty confused, because ScrollablePane is using webkit transforms to emulate scrolling in an inner div (see comments near top of dojox/mobile/scrollable.js). Try the above to see what I mean.
If you're just looking to keep dojox/mobile's custom scrollbar visible, you can override hideScrollBar() in scrollable.js, though it won't act like a normal desktop scrollbar (can't click and drag it, etc). I'd suggest not using a dojox/mobile ScrollablePane when the page is viewed on a desktop, and inserting a different widget such as a regular ContentPane.
As of jqm1.4 it seems like the native like "momentum scrolling" on iOS is no more.
Anyone know how this effect can be achieved? I feel like my app really falls short without it.
Add these two properties to the element
#your-scrollable-element {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
In Apple's list of supported CSS properties they describe the touch behavior as "Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms)."