dreamilan Posted September 12, 2015 Share Posted September 12, 2015 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. Link to comment Share on other sites More sharing options...
shortpencil Posted September 13, 2015 Share Posted September 13, 2015 I have just joined this forum. I do not understand how to begin in this forum. It is not leading me any where when I open it. Link to comment Share on other sites More sharing options...
davej Posted September 13, 2015 Share Posted September 13, 2015 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? Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2015 Share Posted September 13, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2015 Share Posted September 13, 2015 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 More sharing options...
davej Posted September 13, 2015 Share Posted September 13, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now