I have a fixed size div that dynamically shows content.
Should the content be too large for the div what I'd like to happen is for the contents of the div to start scrolling on it's own so the all the content can be seen.
Off the shelf solutions seem to force content to always scroll regardless if it fits inside in the div.
Thank you.
Adding to what Shahar mentioned, you can use jQuery animate api to scroll till the bottom of the div.
var dynamicDiv = $("#dynamic_div");
scrollHeight= dynamicDiv[0].scrollHeight;
divHeight = dynamicDiv.height();
if(scrollHeight > divHeight){
pageScrolls = scrollHeight/divHeight;
$("#dynamic_div").animate({
scrollTop: scrollHeight // scroll till the end of the div
}, 1500 * pageScrolls); // adjust the time based on how much scrolling needs to be done
}
Here's the jsfiddle
If you don't have css rules overriding your browser default styles, it's likely that scrollbars will appear automatically whenever there is overflowing content inside the element.
You can use javascript to test if the content overflows, and if it does, do whatever you want (add scrollbar, change style, use a jquery plugin for it etc...).
With jQuery:
var myDiv = $('#overflowing-div');
if (myDiv[0].scrollHeight > myDiv[0].clientHeight) {
// handle this
}
Based on this answer to check if container is overflowing:
How to detect overflow in div element?
Related
I am using css scroll snap to scroll through that are 100vh in height. The scroll snap works beautifully.
That said I need to determine how far the site visitor has scrolled for a few different reasons.
I have tried:
let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);
I have also tried window.scrollTop, wrapper.scrollTop and more.
Here is a Codepen of what I am seeing
How can I know the distance scrolled while using 100vh sections and css scroll-snap
TIA
Based on your shared code, the reason why window.onscroll does not work as expected is because neither window nor document.body are overflowing vertically. Only the element that is overflowing will fire the scroll event, and in this case it is actually the element that matches the .box-wrapper selector.
Therefore if you listen to the scroll event on that element, then you should be able to retrieve its vertical scroll position using event.currentTarget.scrollTop:
document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
console.log(e.currentTarget.scrollTop);
});
See proof-of-concept example:
I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps
How can you make an element with a scrollbar start off at the bottom of the scroll?
I have a div that has overflow: scroll. When the element is loaded, by default, we see the top of the element and you have to scroll down. I want the view to start at the bottom of the div instead.
JS fiddle example. Goal is to load the bottom element by default:
http://jsfiddle.net/2WpQf/
If you can use javascript, then you may do this (demo: http://jsfiddle.net/2WpQf/1/):
var div = document.getElementById("div");
div.scrollTop = div.scrollHeight;
There's a Jquery Plugin called ScrollTo, which can scroll for you progamatically.
ScrollTo()
I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.
I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>