Jump to content

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


dreamilan

Recommended Posts

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;}
Link to comment
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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...