checking for scrollHeight of an element sometimes returning 0
I figured out the problem, It had to do with the what I was trying to check after different elements were set to display none. For some reason for 5-8 cells it was checking other content instead of the page I was on and then switching to the current content. Changing some Id's ultimately let me fix it.
scrollheight of an element gives undefined value
There is no scrollHeight
in jQuery - it's scrollTop()
:
var elemHeight = $("#container").scrollTop();
var scrollHeight = $("#scrollbars").scrollTop();
Alternatively if you want to use the native scrollHeight
property, you need to access the DOM element in the jQuery object directly, like this:
var elemHeight = $("#container")[0].scrollHeight;
var scrollHeight = $("#scrollbars")[0].scrollHeight;
Or like this:
var elemHeight = $("#container").prop('scrollHeight');
var scrollHeight = $("#scrollbars").prop('scrollHeight');
Check if a user has scrolled to the bottom in subpixel precision era
My current solution:
function isContentScrolledToBottom(element) {
const rest = element.scrollHeight - element.scrollTop;
return Math.abs(element.clientHeight - rest) < 1;
}
It checks if element is scrolled to bottom with ±1 accuracy.
scrollTop not writable and always zero. scrollHeight always the same number
I'm not sure what value you are trying to get. Are you trying to get the scroll position of the body? The position in relation to the body of chatedit
?
To get the body scroll position, you would use:
document.body.scrollTop
To get the position of the chatedit
element, I'd suggest using jQuery:
$('#chatedit').offset().top
If you're trying to see where it sits in relation to the viewport, you would merge the two:
$('#chatedit').offset().top - document.body.scrollTop
offsetHeight, clientHeight and scrollHeight does not give the correct height
After many tests I've figured it out. The solution is to use getComputedStyle(item).getPropertyValue('height')
.
In the below example the first one is untouched and the second one set the height with the above.
window.addEventListener('DOMContentLoaded', (event) => { let items4 = document.querySelectorAll('.section4 div'); items4.forEach((item) => { item.style.height = getComputedStyle(item).getPropertyValue('height'); });});
.div1 { border: 5px solid #fff; padding: .5rem; margin: .5rem; box-sizing: border-box; } .div2 { border: 5px solid #fff; padding: .5rem; margin: .5rem; } .div3 { padding: .5rem; margin: .5rem; box-sizing: border-box; } .div4 { padding: .5rem; margin: .5rem; } .div5 { } div[class^=div] { background: #eee; outline: 1px solid red; } body { display: flex; } section { background: #f5f5f5; margin: .5rem; width: 100px; }
<section class="correct"> <div class="div1">Some<br>text</div> <div class="div2">Some<br>text</div> <div class="div3">Some<br>text</div> <div class="div4">Some<br>text</div> <div class="div5">Some<br>text</div></section>
<section class="section4"> <div class="div1">Some<br>text</div> <div class="div2">Not too<br>High =)</div> <div class="div3">Some<br>text</div> <div class="div4">Not too<br>high =)</div> <div class="div5">Some<br>text</div></section>
How do I get the real .height() of a overflow: hidden or overflow: scroll div?
Use the .scrollHeight
property of the DOM node: $('#your_div')[0].scrollHeight
Check if a user has scrolled to the bottom (not just the window, but any element)
Use the .scroll()
event on window
, like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document
). If you wanted to instead check if the user is near the bottom, it'd look something like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});
You can test that version here, just adjust that 100
to whatever pixel from the bottom you want to trigger on.
Related Topics
How to Pause CSS Transition Mid-Way
Isotope Jquery Plugin Doesn't Show Properly on Chrome
After Content Update from Ajax Jquery Not Work Properly
Opening an External Website in a Modal Popup
Select Box Truncating Text When Body Font Size Changed via JavaScript on Document Ready in Ie 9
How Detect Which Child Element Is Visible After Scrolling the Parent Div
How to Let a Div Stick to Cursor
How to Add a CSS Class to a Raphael Object
Prevent Scroll Bounce for the Body Element, But Keep It for Child Elements in iOS
How to Click on Hidden Element in Protractor
How to Make Content Load When the User Scrolls Down to It
Making an Element Visible by Hovering Another Element (Without :Hover-Property)
Why Do Arabic Characters Behave as Separate Characters When Styling Single Arabic Character
Why Blocking Event Loop Does Not Block CSS Animation
Image Reflection Effect Using Pure CSS
Download Blob File from Website Inside Android Webviewclient