Start Div Scrollbar from Bottom with Pure CSS

Start div scrollbar from bottom with pure css

Use transform:rotateX to wrap div and return it (to avoid the text from turning over) also in sub div

.page{ overflow-y: scroll;
width:150px; height:150px; transform:rotateX(180deg); -moz-transform:rotateX(180deg); /* Mozilla */ -webkit-transform:rotateX(180deg); /* Safari and Chrome */ -ms-transform:rotateX(180deg); /* IE 9+ */ -o-transform:rotateX(180deg); /* Opera */}.sub{ transform:rotateX(180deg); -moz-transform:rotateX(180deg); /* Mozilla */ -webkit-transform:rotateX(180deg); /* Safari and Chrome */ -ms-transform:rotateX(180deg); /* IE 9+ */ -o-transform:rotateX(180deg); /* Opera */}
    <div class="page">    <div class="sub">       <p>This is some text in a paragraph.</p>    <p>This is some text in a paragraph.</p>    <p>This is some text in a paragraph.</p>    <p>This is some text in a paragraph.</p>    <p>This is some text in a paragraph.</p>    <p>This is some text in a paragraph.</p>     </div>
</div>

Keep overflow div scrolled to bottom unless user scrolls up

I was able to get this working with CSS only.

The trick is to use:

display: flex;
flex-direction: column-reverse;

The browser treats the bottom like its the top. Assuming the browsers you're targeting support flex-box, the only caveat is that the markup has to be in reverse order.

Here is a working example. https://codepen.io/jimbol/pen/YVJzBg

How to keep a scrollbar always bottom?

var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

Absolute positioning from bottom not creating overflow scrollbar

I can't find any documentation that proves this but, it's my understanding that overflow is calculated from an origin point usually the top left of an element. Negative overflow doesn't trigger a scroll.

So what you see makes sense because your content would have to extend past the bottom of the element to trigger scroll. When you use position: absolute; relative to the bottom it can't overflow that direction by definition.

I think the way to trick it is to have a wrapper with the overflow and all content positioned inside something else.

How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?

All you need is to add overflow: hidden to your container and scroll it once content is loaded:

div.scrollTop = div.scrollHeight;

Demo http://jsfiddle.net/nT75k/2/

Scrollable div to stick to bottom, when outer div changes in size

2:nd revision of this answer

Your friend here is flex-direction: column-reverse; which does all you ask while align the messages at the bottom of the message container, just like for example Skype and many other chat apps do.

.chat-window{
display:flex;
flex-direction:column;
height:100%;
}
.chat-messages{
flex: 1;
height:100%;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}

.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }

The downside with flex-direction: column-reverse; is a bug in IE/Edge/Firefox, where the scrollbar doesn't show, which your can read more about here: Flexbox column-reverse and overflow in Firefox/IE

The upside is you have ~ 90% browser support on mobile/tablets and ~ 65% for desktop, and counting as the bug gets fixed, ...and there is a workaround.

// scroll to bottom
function updateScroll(el){
el.scrollTop = el.scrollHeight;
}
// only shift-up if at bottom
function scrollAtBottom(el){
return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}

In the below code snippet I've added the 2 functions from above, to make IE/Edge/Firefox behave in the same way flex-direction: column-reverse; does.

function addContent () {  var msgdiv = document.getElementById('messages');  var msgtxt = document.getElementById('inputs');  var atbottom = scrollAtBottom(msgdiv);
if (msgtxt.value.length > 0) { msgdiv.innerHTML += msgtxt.value + '<br/>'; msgtxt.value = ""; } else { msgdiv.innerHTML += 'Long long content ' + (tempCounter++) + '!<br/>'; } /* if at bottom and is IE/Edge/Firefox */ if (atbottom && (!isWebkit || isEdge)) { updateScroll(msgdiv); }}
function resizeInput () { var msgdiv = document.getElementById('messages'); var msgtxt = document.getElementById('inputs'); var atbottom = scrollAtBottom(msgdiv);
if (msgtxt.style.height == '120px') { msgtxt.style.height = 'auto'; } else { msgtxt.style.height = '120px'; } /* if at bottom and is IE/Edge/Firefox */ if (atbottom && (!isWebkit || isEdge)) { updateScroll(msgdiv); }}

/* fix for IE/Edge/Firefox */var isWebkit = ('WebkitAppearance' in document.documentElement.style);var isEdge = ('-ms-accelerator' in document.documentElement.style);var tempCounter = 6;
function updateScroll(el){ el.scrollTop = el.scrollHeight;}function scrollAtBottom(el){ return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));}
html, body { height:100%; margin:0; padding:0; }
.chat-window{ display:flex; flex-direction:column; height:100%;}.chat-messages{ flex: 1; height:100%; overflow: auto; display: flex; flex-direction: column-reverse;}
.chat-input { border-top: 1px solid #999; padding: 20px 5px }.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }

/* temp. buttons for demo */button { width: 12%; height: 44px; margin-left: 5%; vertical-align: top; }
/* begin - fix for hidden scrollbar in IE/Edge/Firefox */.chat-messages-text{ overflow: auto; }@media screen and (-webkit-min-device-pixel-ratio:0) { .chat-messages-text{ overflow: visible; } /* reset Edge as it identifies itself as webkit */ @supports (-ms-accelerator:true) { .chat-messages-text{ overflow: auto; } }}/* hide resize FF */@-moz-document url-prefix() { .chat-input-text { resize: none } }/* end - fix for hidden scrollbar in IE/Edge/Firefox */
<div class="chat-window">  <div class="chat-messages">    <div class="chat-messages-text" id="messages">      Long long content 1!<br/>      Long long content 2!<br/>      Long long content 3!<br/>      Long long content 4!<br/>      Long long content 5!<br/>    </div>  </div>  <div class="chat-input">    <textarea class="chat-input-text" placeholder="Type your message here..." id="inputs"></textarea>    <button onclick="addContent();">Add msg</button>    <button onclick="resizeInput();">Resize input</button>  </div></div>

Adding a scroll bar if div extends below bottom of view port

How about a wrapper with overflow auto and some 100% trickery. I.e. some variant of this:

<!DOCTYPE HTML> 
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>100% thing</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
height: 100%;
width: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>To Sherlock Holmes she is always <i>the</i> woman. I have seldom heard
him mention her under any other name. In his eyes she eclipses
and predominates the whole of her sex. It was not that he felt
any emotion akin to love for Irene Adler. All emotions, and that
one particularly, were abhorrent to his cold, precise but
admirably balanced mind. He was, I take it, the most perfect
reasoning and observing machine that the world has seen, but as a
lover he would have placed himself in a false position. He never
spoke of the softer passions, save with a gibe and a sneer. They
were admirable things for the observer—excellent for drawing the
veil from men’s motives and actions. But for the trained reasoner
to admit such intrusions into his own delicate and finely
adjusted temperament was to introduce a distracting factor which
might throw a doubt upon all his mental results. Grit in a
sensitive instrument, or a crack in one of his own high-power
lenses, would not be more disturbing than a strong emotion in a
nature such as his. And yet there was but one woman to him, and
that woman was the late Irene Adler, of dubious and questionable
memory.
<p>
I had seen little of Holmes lately. My marriage had drifted us
away from each other. My own complete happiness, and the
home-centred interests which rise up around the man who first
finds himself master of his own establishment, were sufficient to
absorb all my attention, while Holmes, who loathed every form of
society with his whole Bohemian soul, remained in our lodgings in
Baker Street, buried among his old books, and alternating from
week to week between cocaine and ambition, the drowsiness of the
drug, and the fierce energy of his own keen nature. He was still,
as ever, deeply attracted by the study of crime, and occupied his
immense faculties and extraordinary powers of observation in
following out those clues, and clearing up those mysteries which
had been abandoned as hopeless by the official police. From time
to time I heard some vague account of his doings: of his summons
to Odessa in the case of the Trepoff murder, of his clearing up
of the singular tragedy of the Atkinson brothers at Trincomalee,
and finally of the mission which he had accomplished so
delicately and successfully for the reigning family of Holland.
Beyond these signs of his activity, however, which I merely
shared with all the readers of the daily press, I knew little of
my former friend and companion.
<p>
One night—it was on the twentieth of March, 1888—I was
returning from a journey to a patient (for I had now returned to
civil practice), when my way led me through Baker Street. As I
passed the well-remembered door, which must always be associated
in my mind with my wooing, and with the dark incidents of the
Study in Scarlet, I was seized with a keen desire to see Holmes
again, and to know how he was employing his extraordinary powers.
His rooms were brilliantly lit, and, even as I looked up, I saw
his tall, spare figure pass twice in a dark silhouette against
the blind. He was pacing the room swiftly, eagerly, with his head
sunk upon his chest and his hands clasped behind him. To me, who
knew his every mood and habit, his attitude and manner told their
own story. He was at work again. He had risen out of his
drug-created dreams and was hot upon the scent of some new
problem. I rang the bell and was shown up to the chamber which
had formerly been in part my own.
</div>
</div>
</body>
</html>

See a demonstration at jsFiddle.



Related Topics



Leave a reply



Submit