Jump to content
dreamilan

how i can do when page opens it will show end of div with overflow

Recommended Posts

guys i need your help.

 

.a {width:500px; height:300px; overflow-x:hidden; overflow-y:auto; }

 

 

i have a div which shows messages like facebook. i want to open the page with overflow-y but it wont up it will show end of div. Scroll should be down when page opens.

Share this post


Link to post
Share on other sites

It might be useful to see a screenshot, diagram, or link to an example of what you want. Did you really want "a" to be a class?

Share this post


Link to post
Share on other sites

If you want it to automatically be scrolled to the bottom at the beginning you will need to use Javascript. CSS can't control the position of the scroll bar.

Share this post


Link to post
Share on other sites

I can make appear at bottom for starters, but if user wishes to scroll it will shot to top again.

<div id="frame_outer">            <div id="frame_content">                <p>START Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                </p>                <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis                    sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.                    Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum.                    Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis n                   isl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus                    quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.                </p>                <p> Suspendisse et orci et arcu porttitor pellentesque. Sed lacus nunc, fermentum vel, vehicula in, imperdiet eget, urna. Nam consectetuer euismod nunc.                     Nulla dignissim posuere nulla. Integer iaculis lacinia massa. Nullam sapien augue, condimentum vel, venenatis id, rhoncus pellentesque, sapien. Donec                     sed ipsum ultrices turpis consectetuer imperdiet. Duis et ipsum ac nisl laoreet commodo. Mauris eu est. Suspendisse id turpis quis orci euismod consequat.                     Donec tellus mi, luctus sit amet, ultrices a, convallis eu, lorem. Proin faucibus convallis elit. Maecenas rhoncus arcu at arcu. Proin libero. Proin adipiscing.                    In quis lorem vitae elit consectetuer pretium. Nullam ligula urna, adipiscing nec, iaculis ut, elementum non, turpis. Fusce pulvinar. THE END                  </p>         </div></div>
#frame_outer {    border: 2px solid purple;    height: 300px;    margin: 30px;    overflow-x: hidden;    overflow-y: scroll;    position: relative;    width: 500px;}#frame_outer div {    bottom: calc(-100% + 300px);    position: absolute;}#frame_outer div:hover {    bottom: auto;}

Share this post


Link to post
Share on other sites

As Ingolme said above...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>.a {width:500px; height:300px; overflow-x:hidden; overflow-y:auto;}</style><script>window.onerror = function(a,b,c){alert('Javascript Error: '+a+'nURL: '+b+'nLine Number: '+c);return true;}</script><script>'use strict';window.onload = init;function init(){var a = document.getElementsByClassName('a')[0];var h = a.scrollHeight;a.scrollTop = h;}</script></head><body><div class="a"><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p><p>abc def ghi jkl mno pqr stu vwx yz</p></div></body>    </html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...