I have a simple chat section in my app similar to texting/iMessage. How can I have overflow hidden, but starting at the bottom and scroll up? Is there anyway to do this without JS?
This task requires you to initially set the scrollTop position and it's necessary to use JS to do the job. I don't think using CSS alone would fit your need.
See this:
set scrollTop and scrollLeft without javascript
Related
I have this code running with react js
<div style={{width:width, height:'1000px',overflowX:'hidden',overflowY:'scroll'}}>
<img src={img} style={{position:'relative', top:top, left:left, zoom:zoom+'%'}}/>
</div>
The variable top is a negative number. This allows me to start displaying the image at a certain height. And I can scroll down to the bottom of the image. However I cannot fully scroll all the way back up to the top of the image (not the initial position).Any ideas on how to allow that?
You should change the scrollTop property of the <div> instead of the top. You need JavaScript for this.
element.scrollTop = <your variable (positive)>
If for some reason you want only CSS, you can check set scrollTop and scrollLeft without javascript
There are already multiple questions on the topic of overflow/rubberband scrolling on SO but
none of them provides a solution working for all cases on iOS 9.3.2
none of them gives extensive and complete information on the problem itself
which is why I created this post as a body of knowledge.
The problem:
The thing that was never mentioned in any other post is that iOS overflow scrolling is actually a two part behaviour.
1. Overflow scrolling of content with overflow: auto/scroll
This is the commonly known and mostly wanted behaviour of a element with -webkit-overflow-scrolling: touch where the continuous/momentum scrolling behaviour goes past the elements container to slow the scrolled content down smoothly.
It happens when you scroll the content of an element with a momentum high enough for the momentum scrolling to go past the length of the scrolled content.
With this behaviour the element.scrollTop property changing accordingly to the elements scroll position and being less than 0 or bigger than the maximum scroll (element.scrollHeight - element.offsetHeight).
2. Overflow scrolling of <body>
This behaviour occurs if you try to scroll any element already at its minimum/maximum scroll position even further than that (an element at top upwards or element at bottom downwards). Then the scroll seems to "bubble up" up to the <body> tag and the whole viewport is scrolled.
In contrary to above here the element.scrollTop property does not change but document.body.scrollTop changes instead.
Focus lock and switching between behaviours (1.5s delay)
The most irritating thing in this context is that the switch between the two types described above does not switch instantly.
After you enter one of both you cannot switch focus onto any other element (scrollable elements, buttons, links, ...) and thereby the scrolling behaviour does not change as well.
For instance: if you scroll a element already at its top position upwards you enter overflow scrolling type 2 and the most natural reaction for a user is to then try to scroll back down. Because the focus is locked to the body scroll instead of going to overflow scrolling type 1 it stays in type 2 and the whole body is scrolled downwards. The typical user then starts to arbitrarily starts to scroll up and down frequently without ever breaking out of type 2.
The switch of focus and thus the change of scrolling behaviour can only occur after the overflow animation has finished and the element stands still (even a bit longer [around 0.5s] than that).
thus going back to the previous example the correct reaction of the user would be to stop touching the screen for around 1s - 1.5s and then try to scroll downwards again.
The solution:
Type 1:
The most basic solution to prevent overflow scrolling on the element itself is to prevent default on touch events.
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
});
This method however disables the browsers native momentum scroll and is thereby not suitable for most applications. With some refinement however (only prevent if at top scrolling up or at bottom scrolling down, ...) this method fixes most problems. Many possible implementations can be found in this SO post.
Type 2:
Overflow scrolling on the body however is not prevented by methods described above.
One possible solution which seems reasonable is to prevent the element from ever being at its top or bottom position as described as best solution on mentioned question.
anElement.addEventListener('touchstart', function( event ){
if( this.scrollTop === 0 ) {
this.scrollTop += 1;
} else if( this.scrollTop + this.offsetHeight >= this.scrollHeight ) {
this.scrollTop -= 1;
}
}
This however did not reliably work on iOS 9.3.2.
What did work however is setting position: fixed on the <body> element to prevent the body from moving. Please note however that this still does not completely stop type 2 from happening, which is why sometimes you cannot scroll/focus any element because in the background type2 with its focus lock is still happening (again, after you stop touching the screen for a moment it again works as expected).
While this is still far from being the optimal solution it seems to be the best we can get for the time speaking.
Edit: Please note that I am not sure if it is safe to put position: fixed on a <body> element. To track possible issues I have created following SO post. Apparently it might be better to create a wrapper element as child of body and set that element to position: fixed to avoid zoom problemes.
Edit 2: The definite solution
The script iNoBounce works wonders. Just load it to the page and experience a bounce-free web application. So far I have not found any problems with this solution.
I see this issue is still relevant so...
Be aware of using position: fixed on body. It may do weird scroll freeze bug - actually it will still "rubberband" but you will not see it.
see: Div scrolling freezes sometimes if I use -webkit-overflow-scrolling
A nice, simple and native solution. No Javascript needed.
Just add overflow scroll to your children. Gives your app a nice and native 'touch'
body{
position: fixed;
}
I want to do something like the 3rd column of Facebook home page from left (where ads appear). When you scroll the page upward, all three columns scroll, but then 3rd column stops scrolling. How to do that? Can it be done with CSS?
I think Facebook does it with a mix of javascript/css
When user is scrolling down, they change position attribute to right col element to fixed.
position: fixed
try this sticyjs puigin
http://stickyjs.com/
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script
In the bootstrap world, this is called affix. Basically, you're listening to the scroll event with javascript and changing the styling (css) based on breakpoints (specific scroll position).
To answer the second question, I don't believe it can be done solely with CSS.
I have a background that is a set of fairly complex gradients (done with CSS, not images). In the middle of the page is a fixed frame, and the content sits inside this frame. I can set overflow-y: auto on this frame to scroll the content, but I would like to be able to use the window to scroll instead.
Here is what the page looks like now:
I would like the scroll bar to be on the window instead. I can take the content outside of the frame and add margins as necessary, but the problem is that then the content will appear outside the frame. I could then cover it up on the top and bottom, but this is difficult/impossible because the background is not an image and is not solid.
Is there any way to have a transparent element at the top/bottom block text that scrolls under it? Can you somehow apply styles to content that overlaps?
Even the fanciest single-browser only solution that requires JavaScript is perfectly acceptable.
if all you're aiming at is hiding the scrollbar (and assuming you're ok with jQuery), i'd suggest to use something like slimScroll.
what's going on under the hood is simple: the designated container is assigned with overflow: hidden;, and attached with a hover handler - with the sole purpose of simulating a custom scrollbar in response to mouse-over events.
Try to explore jScrollPane features.
It's powerfull flexible JQuery plugin for working with scrollbars, possibly you will find solution with it.
How do i TOTALLY prevent scrolling on my website even if there is overflow. I just don't want to hide the scrollbars because you usually can just use the mousewheel or page down anyway. I want them to be both hidden and locked.
The problem is that i have this structure(with real css and html of course)
<outerdiv height="100%">
<innerdiv height="100%">
<contentdiv height="ALOT">content</contentdiv>
</innerdiv>
<outerdiv>
I only want innerdiv to scroll its children but sometimes you accidentally focus the outerdiv and when you start scrolling then the innerdiv will scroll out of view (because it's a child of the outerdiv) and you cant view the actual content anymore.
The initial layout will give both outerdiv and innerdiv the height of the browser but when looking at content to scroll the outerdiv seems to look all the way to the children of innerdiv which makes no sense as this already scrolls by itself.
If you use whole screen anyways, then why not just use position:absolute (with top, left, right and left set to 0) and overflow:auto with the innerdiv?
no scrolling:
style="overflow:none;"
automatic scrolling:
style="overflow:auto;"