Mixing
angular - scroll height and document height units
When the window slides, it can detect the current height, but I don't know the unit of this height. I hope to get the total height(bottom height) by angular.
The height of the document is different from the height unit of the scroll. How do you convert between the two? Or in what way do you get the common unit?
For example:
import {HostListener,Inject} from "@angular/core";
import { DOCUMENT } from "@angular/platform-browser";
constructor(@Inject(DOCUMENT) private document: Document {}
ngOnInit() {
}
@HostListener("window:scroll", )onWindowScroll() {
//.scrollTop
console.log(this.document.documentElement.scrollTop)
//.clientHeight
console.log(this.document.documentElement.clientHeight);
//.innerHeight
console.log(window.innerHeight);
}
These three are different.
document.documentElement.scrollTop ≠ document.documentElement.clientHeight ≠ window.innerHeight
angular
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
add a comment |
When the window slides, it can detect the current height, but I don't know the unit of this height. I hope to get the total height(bottom height) by angular.
The height of the document is different from the height unit of the scroll. How do you convert between the two? Or in what way do you get the common unit?
For example:
import {HostListener,Inject} from "@angular/core";
import { DOCUMENT } from "@angular/platform-browser";
constructor(@Inject(DOCUMENT) private document: Document {}
ngOnInit() {
}
@HostListener("window:scroll", )onWindowScroll() {
//.scrollTop
console.log(this.document.documentElement.scrollTop)
//.clientHeight
console.log(this.document.documentElement.clientHeight);
//.innerHeight
console.log(window.innerHeight);
}
These three are different.
document.documentElement.scrollTop ≠ document.documentElement.clientHeight ≠ window.innerHeight
angular
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
what do you mean by convert? these are separate properties and hence named differently - with definitions present in various locations
– Akber Iqbal
Nov 22 '18 at 6:06
@AIqbalRaj Edited in the first paragraph.
– Albert
Nov 22 '18 at 6:23
add a comment |
When the window slides, it can detect the current height, but I don't know the unit of this height. I hope to get the total height(bottom height) by angular.
The height of the document is different from the height unit of the scroll. How do you convert between the two? Or in what way do you get the common unit?
For example:
import {HostListener,Inject} from "@angular/core";
import { DOCUMENT } from "@angular/platform-browser";
constructor(@Inject(DOCUMENT) private document: Document {}
ngOnInit() {
}
@HostListener("window:scroll", )onWindowScroll() {
//.scrollTop
console.log(this.document.documentElement.scrollTop)
//.clientHeight
console.log(this.document.documentElement.clientHeight);
//.innerHeight
console.log(window.innerHeight);
}
These three are different.
document.documentElement.scrollTop ≠ document.documentElement.clientHeight ≠ window.innerHeight
angular
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
When the window slides, it can detect the current height, but I don't know the unit of this height. I hope to get the total height(bottom height) by angular.
The height of the document is different from the height unit of the scroll. How do you convert between the two? Or in what way do you get the common unit?
For example:
import {HostListener,Inject} from "@angular/core";
import { DOCUMENT } from "@angular/platform-browser";
constructor(@Inject(DOCUMENT) private document: Document {}
ngOnInit() {
}
@HostListener("window:scroll", )onWindowScroll() {
//.scrollTop
console.log(this.document.documentElement.scrollTop)
//.clientHeight
console.log(this.document.documentElement.clientHeight);
//.innerHeight
console.log(window.innerHeight);
}
These three are different.
document.documentElement.scrollTop ≠ document.documentElement.clientHeight ≠ window.innerHeight
angular
angular
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
edited Nov 22 '18 at 6:47
Albert
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
asked Nov 22 '18 at 5:58
AlbertAlbert
147315
147315
what do you mean by convert? these are separate properties and hence named differently - with definitions present in various locations
– Akber Iqbal
Nov 22 '18 at 6:06
@AIqbalRaj Edited in the first paragraph.
– Albert
Nov 22 '18 at 6:23
add a comment |
what do you mean by convert? these are separate properties and hence named differently - with definitions present in various locations
– Akber Iqbal
Nov 22 '18 at 6:06
@AIqbalRaj Edited in the first paragraph.
– Albert
Nov 22 '18 at 6:23
what do you mean by convert? these are separate properties and hence named differently - with definitions present in various locations
– Akber Iqbal
Nov 22 '18 at 6:06
what do you mean by convert? these are separate properties and hence named differently - with definitions present in various locations
– Akber Iqbal
Nov 22 '18 at 6:06
@AIqbalRaj Edited in the first paragraph.
– Albert
Nov 22 '18 at 6:23
@AIqbalRaj Edited in the first paragraph.
– Albert
Nov 22 '18 at 6:23
add a comment |
1 Answer
1
active
oldest
votes
First of all this question has nothing to do with Angular, but it is specifically Javascript DOM model.
Second all heights and width are returned in pixels, so there is no question of conversion
now specific to elements asked by you
document.documentElement.scrollTop - this property returns the number of pixels an element's content is scrolled vertically. For more information refer this url
window.innerHeight and document.documentElement.clientHeight are same, only difference is IE older browser calles it document.documentElement.clientHeight, and modern browswer calles it window.innerHeight. Refer this link for more details
Is there any way to get the total height of the scroll?
– Albert
Nov 22 '18 at 6:38
Scroll is always attached to an element, most of the time div. So you can get height of corresponding div. I prefer to use$('#some_div').height();, but in case you are not using jquery, please usedocument.getElementById('some_div').getBoundingClientRect().heightordocument.getElementById('some_div').clientHeight
– user7154703
Nov 22 '18 at 6:50
I tried to usethis.document.documentElement.getBoundingClientRect().height, its value is closer tothis.document.documentElement.scrollTop,butthis.document.documentElement.clientHeightis completely another value.
– Albert
Nov 22 '18 at 6:59
Am not sure how you are checking but at element level there are not many variations than mentioned below ` document.getElementById("some_div").height ` 2)height() - return the height without padding3)innerHeight() - Returns the height of an element (includes padding)4)outerHeight() - Returns the height of an element (includes padding and border)
– user7154703
Nov 22 '18 at 7:09
1
If you using Chrome, please take help from Developer Tool ( Control + Shift + I ) , you will know which class exactly changing height . And refer url w3schools.com/jquery/css_height.asp and w3schools.com/jsref/obj_screen.asp for height specific knowledge.
– user7154703
Nov 22 '18 at 7:56
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424704%2fangular-scroll-height-and-document-height-units%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
First of all this question has nothing to do with Angular, but it is specifically Javascript DOM model.
Second all heights and width are returned in pixels, so there is no question of conversion
now specific to elements asked by you
document.documentElement.scrollTop - this property returns the number of pixels an element's content is scrolled vertically. For more information refer this url
window.innerHeight and document.documentElement.clientHeight are same, only difference is IE older browser calles it document.documentElement.clientHeight, and modern browswer calles it window.innerHeight. Refer this link for more details
Is there any way to get the total height of the scroll?
– Albert
Nov 22 '18 at 6:38
Scroll is always attached to an element, most of the time div. So you can get height of corresponding div. I prefer to use$('#some_div').height();, but in case you are not using jquery, please usedocument.getElementById('some_div').getBoundingClientRect().heightordocument.getElementById('some_div').clientHeight
– user7154703
Nov 22 '18 at 6:50
I tried to usethis.document.documentElement.getBoundingClientRect().height, its value is closer tothis.document.documentElement.scrollTop,butthis.document.documentElement.clientHeightis completely another value.
– Albert
Nov 22 '18 at 6:59
Am not sure how you are checking but at element level there are not many variations than mentioned below ` document.getElementById("some_div").height ` 2)height() - return the height without padding3)innerHeight() - Returns the height of an element (includes padding)4)outerHeight() - Returns the height of an element (includes padding and border)
– user7154703
Nov 22 '18 at 7:09
1
If you using Chrome, please take help from Developer Tool ( Control + Shift + I ) , you will know which class exactly changing height . And refer url w3schools.com/jquery/css_height.asp and w3schools.com/jsref/obj_screen.asp for height specific knowledge.
– user7154703
Nov 22 '18 at 7:56
|
show 3 more comments
First of all this question has nothing to do with Angular, but it is specifically Javascript DOM model.
Second all heights and width are returned in pixels, so there is no question of conversion
now specific to elements asked by you
document.documentElement.scrollTop - this property returns the number of pixels an element's content is scrolled vertically. For more information refer this url
window.innerHeight and document.documentElement.clientHeight are same, only difference is IE older browser calles it document.documentElement.clientHeight, and modern browswer calles it window.innerHeight. Refer this link for more details
Is there any way to get the total height of the scroll?
– Albert
Nov 22 '18 at 6:38
Scroll is always attached to an element, most of the time div. So you can get height of corresponding div. I prefer to use$('#some_div').height();, but in case you are not using jquery, please usedocument.getElementById('some_div').getBoundingClientRect().heightordocument.getElementById('some_div').clientHeight
– user7154703
Nov 22 '18 at 6:50
I tried to usethis.document.documentElement.getBoundingClientRect().height, its value is closer tothis.document.documentElement.scrollTop,butthis.document.documentElement.clientHeightis completely another value.
– Albert
Nov 22 '18 at 6:59
Am not sure how you are checking but at element level there are not many variations than mentioned below ` document.getElementById("some_div").height ` 2)height() - return the height without padding3)innerHeight() - Returns the height of an element (includes padding)4)outerHeight() - Returns the height of an element (includes padding and border)
– user7154703
Nov 22 '18 at 7:09
1
If you using Chrome, please take help from Developer Tool ( Control + Shift + I ) , you will know which class exactly changing height . And refer url w3schools.com/jquery/css_height.asp and w3schools.com/jsref/obj_screen.asp for height specific knowledge.
– user7154703
Nov 22 '18 at 7:56
|
show 3 more comments
First of all this question has nothing to do with Angular, but it is specifically Javascript DOM model.
Second all heights and width are returned in pixels, so there is no question of conversion
now specific to elements asked by you
document.documentElement.scrollTop - this property returns the number of pixels an element's content is scrolled vertically. For more information refer this url
window.innerHeight and document.documentElement.clientHeight are same, only difference is IE older browser calles it document.documentElement.clientHeight, and modern browswer calles it window.innerHeight. Refer this link for more details
First of all this question has nothing to do with Angular, but it is specifically Javascript DOM model.
Second all heights and width are returned in pixels, so there is no question of conversion
now specific to elements asked by you
document.documentElement.scrollTop - this property returns the number of pixels an element's content is scrolled vertically. For more information refer this url
window.innerHeight and document.documentElement.clientHeight are same, only difference is IE older browser calles it document.documentElement.clientHeight, and modern browswer calles it window.innerHeight. Refer this link for more details
answered Nov 22 '18 at 6:27
user7154703
Is there any way to get the total height of the scroll?
– Albert
Nov 22 '18 at 6:38
Scroll is always attached to an element, most of the time div. So you can get height of corresponding div. I prefer to use$('#some_div').height();, but in case you are not using jquery, please usedocument.getElementById('some_div').getBoundingClientRect().heightordocument.getElementById('some_div').clientHeight
– user7154703
Nov 22 '18 at 6:50
I tried to usethis.document.documentElement.getBoundingClientRect().height, its value is closer tothis.document.documentElement.scrollTop,butthis.document.documentElement.clientHeightis completely another value.
– Albert
Nov 22 '18 at 6:59
Am not sure how you are checking but at element level there are not many variations than mentioned below ` document.getElementById("some_div").height ` 2)height() - return the height without padding3)innerHeight() - Returns the height of an element (includes padding)4)outerHeight() - Returns the height of an element (includes padding and border)
– user7154703
Nov 22 '18 at 7:09
1
If you using Chrome, please take help from Developer Tool ( Control + Shift + I ) , you will know which class exactly changing height . And refer url w3schools.com/jquery/css_height.asp and w3schools.com/jsref/obj_screen.asp for height specific knowledge.
– user7154703
Nov 22 '18 at 7:56
|
show 3 more comments
Is there any way to get the total height of the scroll?
– Albert
Nov 22 '18 at 6:38
Scroll is always attached to an element, most of the time div. So you can get height of corresponding div. I prefer to use$('#some_div').height();, but in case you are not using jquery, please usedocument.getElementById('some_div').getBoundingClientRect().heightordocument.getElementById('some_div').clientHeight
– user7154703
Nov 22 '18 at 6:50
I tried to usethis.document.documentElement.getBoundingClientRect().height, its value is closer tothis.document.documentElement.scrollTop,butthis.document.documentElement.clientHeightis completely another value.
– Albert
Nov 22 '18 at 6:59
Am not sure how you are checking but at element level there are not many variations than mentioned below ` document.getElementById("some_div").height ` 2)height() - return the height without padding3)innerHeight() - Returns the height of an element (includes padding)4)outerHeight() - Returns the height of an element (includes padding and border)
– user7154703
Nov 22 '18 at 7:09
1
If you using Chrome, please take help from Developer Tool ( Control + Shift + I ) , you will know which class exactly changing height . And refer url w3schools.com/jquery/css_height.asp and w3schools.com/jsref/obj_screen.asp for height specific knowledge.
– user7154703
Nov 22 '18 at 7:56
Is there any way to get the total height of the scroll?
– Albert
Nov 22 '18 at 6:38
Is there any way to get the total height of the scroll?
– Albert
Nov 22 '18 at 6:38
Scroll is always attached to an element, most of the time div. So you can get height of corresponding div. I prefer to use
$('#some_div').height();, but in case you are not using jquery, please use document.getElementById('some_div').getBoundingClientRect().height or document.getElementById('some_div').clientHeight– user7154703
Nov 22 '18 at 6:50
Scroll is always attached to an element, most of the time div. So you can get height of corresponding div. I prefer to use
$('#some_div').height();, but in case you are not using jquery, please use document.getElementById('some_div').getBoundingClientRect().height or document.getElementById('some_div').clientHeight– user7154703
Nov 22 '18 at 6:50
I tried to use
this.document.documentElement.getBoundingClientRect().height, its value is closer to this.document.documentElement.scrollTop,but this.document.documentElement.clientHeight is completely another value.– Albert
Nov 22 '18 at 6:59
I tried to use
this.document.documentElement.getBoundingClientRect().height, its value is closer to this.document.documentElement.scrollTop,but this.document.documentElement.clientHeight is completely another value.– Albert
Nov 22 '18 at 6:59
Am not sure how you are checking but at element level there are not many variations than mentioned below ` document.getElementById("some_div").height ` 2)
height() - return the height without padding 3) innerHeight() - Returns the height of an element (includes padding) 4) outerHeight() - Returns the height of an element (includes padding and border)– user7154703
Nov 22 '18 at 7:09
Am not sure how you are checking but at element level there are not many variations than mentioned below ` document.getElementById("some_div").height ` 2)
height() - return the height without padding 3) innerHeight() - Returns the height of an element (includes padding) 4) outerHeight() - Returns the height of an element (includes padding and border)– user7154703
Nov 22 '18 at 7:09
1
1
If you using Chrome, please take help from Developer Tool ( Control + Shift + I ) , you will know which class exactly changing height . And refer url w3schools.com/jquery/css_height.asp and w3schools.com/jsref/obj_screen.asp for height specific knowledge.
– user7154703
Nov 22 '18 at 7:56
If you using Chrome, please take help from Developer Tool ( Control + Shift + I ) , you will know which class exactly changing height . And refer url w3schools.com/jquery/css_height.asp and w3schools.com/jsref/obj_screen.asp for height specific knowledge.
– user7154703
Nov 22 '18 at 7:56
|
show 3 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424704%2fangular-scroll-height-and-document-height-units%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what do you mean by convert? these are separate properties and hence named differently - with definitions present in various locations
– Akber Iqbal
Nov 22 '18 at 6:06
@AIqbalRaj Edited in the first paragraph.
– Albert
Nov 22 '18 at 6:23