I have a table body
<tbody id='displaylaps' class='scroll' style='width: 100%'></tbody>
Which fills with data and scrolls when it reaches a certain vertical length.
I wanted to have an over scroll effect like the effect after an iOS safari page ends and bounces back. Also needs to be iOS touch compatible.
Do you want to accomplish this on iOS or in a desktop web browser?
For iOS, simply add this to your CSS:
#displaylaps {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Alternatively, you can use iScroll library for desktop webkit browsers
Related
I have a container in React, which is scrolled to bottom by default and user can scroll up if he/she wants. Also, we want to show the scrollbar only after the user scrolls, so it is overflow:hidden by default, and once the user starts scrolling, we listen to the wheel event, and add a class to make it overflow:auto, and then the container scrolls.
Now, this behaviour is working fine for Chrome but is not working on Firefox when then user is trying to scroll up using laptop trackpad.
On Firefox, on the first scroll swipe, only the scrollbar appears and the container does not scroll. It scrolls only on scrolling the 2nd time.
Please check the behaviour here -
https://jsfiddle.net/naman_anand/5qf79cka/33/
Any idea as to why this difference of behaviour in Chrome & Firefox?
any leads will help. Thank you.
try hiding the doing this instead of overflow attribute
#element::-webkit-scrollbar {
display: none;
}
be sure to change the #element to your container.
To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera)
.element::-webkit-scrollbar { width: 0 !important }
-moz- (Firefox):
.element { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.element { -ms-overflow-style: none; }
I'm using ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track to style a scrollbar in a DIV, and it's working perfectly.
But while I was testing it on iOS safari, I noticed that the scrolling isn't smooth (doesn't use "Momentum Scrolling"). I could fix it by using the following css on it:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
That made the scrolling smooth, but the styling is gone.
So my question: is there any way to keep the scrollbar smooth on iOS devices while the scrollbar styling is taking effect?
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)."
In a mobile web application I have a div which can be scrolled with the new fancy -webkit-overflow-scrolling: touch. The only problem is that the content is being rendered only when the scrolling finishes. Is there a way to make Mobile Safari (and maybe other mobile browsers, like that one in Android) render the html during single finger scroll?
.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
You can work around this by using hardware acceleration. Try adding the following CSS to elements inside .layer-content:
-webkit-transform: translate3d(0,0,0);
Not really. That is just the way the iPhone works. If you scroll, all resources are used to make the scrolling very smooth, at the expense of not showing the new parts. You could maybe fool the browser into thinking the layer is bigger, by making it bigger, and add a layer on top of the part you don't want to show, but this doesn't work for all layouts. I would just leave it be. Users are used to it, as normal pages have the same 'rendering issue'.
The position: absolute is messing with the rendering. The Mobile Safari will not render elements that does not have the standard value for positioning, until the scrolling have come to a halt.
If the position is auto (the default value), Mobile Safari will render the element as you scroll.
I'm pretty darn sure I just solved this with:
overflow-y: auto;
Add that to your scrolling element.
(Presumably just overflow: auto; would work too depending on your needs.)