get the height of horizontal scrollbar - javascript

I encountered a problem where I need to know of the height of horizontal scrollbar.
This Q&A suggests that you should use clientHeight property and calculate difference. Unfortunately this does not work anymore as is evident here https://jsfiddle.net/fn8naww8/
So how can I get the height of scrollbar?
EDIT: OSX does not differentiate between offsetHeight and clientHeight.
html:
<div id="wrapper">
<div id="content"></div>
</div>
css:
#wrapper{
height:100px;
width:100%;
overflow-x:auto;
}
#content{
height:100%;
width:200%;
background:linear-gradient(to right, red , yellow);
}

Try with:
var horizontalScrollbarHeight = wrapper.offsetHeight - wrapper.clientHeight;
or like:
var horizontalScrollbarHeight = wrapper.offsetHeight - parseInt(window.getComputedStyle(wrapper, null).getPropertyValue("height"), 10);
Both will return ~17 if the scrollbar size was not altered by CSS like by using ::-webkit-scrollbar
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

console.log(window.getComputedStyle(document.querySelector("#wrapper")).height);
console.log(window.getComputedStyle(document.querySelector("#content")).height);
*{
box-sizing: border-box;
}
#wrapper{
height:100px;
width:100%;
overflow-x:auto;
}
#content{
height:100%;
width:200%;
background:linear-gradient(to right, red , yellow);
}
<div id="wrapper">
<div id="content"></div>
</div>
This will return 100px for wrapper and 83px for inner.

There is a magic number: “17px”.
Seems this height/width does not change even if you resize the browser window.
And it works on Chrome fine with my test.

Related

Full screen width for child element of a non full screen width parent

This question builds upon that one, where in order to apply full screen width to a child of a non full width parent element, the following rule is used on the child element:
width: 100vw;
margin-left: calc(-50vw + 50%);
As shown in this Fiddle, this solution doesn't work in the presence of a vertical scrollbar though: 100vw doesn't take the scrollbar into account and hence the child element ends up being wider than the screen (note: works perfectly without scrollbar).
Is there a way to solve this problem so that the child element takes exactly full screen width? If not in pure CSS then with JS?
Note: an overflow rule on body isn't acceptable in my case as I need the child to fill the exact width of the screen.
https://jsfiddle.net/k3nvkL35/4/
One of the issues you'll come across with the solution here is that I believe scrollbar widths are not universal, and so you may need to implement some conditional logic to affect width/margin based on that.
That being said, you may find this useful. The function below will check to see if the document has a vertical scrollbar by comparing the document's height to the window's height. Based on the existence of said scrollbar, it will modify the child's width and margins to fit the window.
Again, it likely requires tweaking, though it should provide a decent foundation.
function adjustWidth() {
if ($(document).height() > $(window).height()) {
$(".child").css({
"width": "calc(100vw - 18px)",
"margin-left": "calc(-50vw + 50% + 9px)"
});
} else {
$(".child").css({
"width": "",
"margin-left": ""
})
}
}
$(window).resize(adjustWidth).trigger("resize");
.parent {
width: 500px;
height: 500px;
margin: 0 auto;
border: 3px solid green;
}
.child {
height: 100px;
background: red;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
content
</div>
</div>
Simple. Since the parent isn't positioned in any way, then the child can be positioned absolutely. No messing with calc or otherwise, works everywhere.
.child {
height: 100px;
background: red;
position:absolute;
left:0;
right:0;
}
Here is a working fiddle:
https://jsfiddle.net/vgbr6qw2/
I found this solution, which was sourced by this guy, but I don't know who originally did it. I haven't fully tested it, so it may not work in all browsers. I know the vw unit isn't supported in IE8, as if anyone cares.
body {
margin:0;
}
.wrapper {
width:100%;
max-width:400px;
margin:0 auto;
background:pink;
/* margin is for display purposes on stack overflows fullscreen snippet view */
margin-top:80px;
}
.full-width {
width:100vw;
margin-left:-50vw;
left:50%;
background:red;
position:relative;
color:white;
}
<div class="wrapper">
<span>Hi. I'm a paragraph.</span>
<div class="full-width">
<p>You aint no paragraph, sucka!</p>
</div>
<strong>Be quiet, you weak losers.</strong>
</div>

scroll top value changes when in developer mode

I'm trying to make a custom scrollbar for my web app.
The mechanism for my scrollbar is the default scrollbar is shifted right by 100px padding and it is hidden by overflow:hidden of the parent container
$(".scrollbar-vertical").parent().children(".content").scroll(function(){
scrollerHeight = ( $(this).parent().height() / $(this).prop("scrollHeight") ) * $(this).parent().height();
//pad = $(this).css("padding-bottom").match(/[-\d]+/g)[0]*1+$(this).css("padding-top").match(/[-\d]+/g)[0]*1;
sTop = ( $(this).scrollTop() / ( $(this).prop("scrollHeight") - $(this).outerHeight() ) * ( $(this).height() - scrollerHeight) );
console.log($(this).scrollTop());
$(this).parent().children(".scrollbar").children(".scroller").css({
margin:sTop+"px"+" 0 0 0"
});
});
$(".scrollbar-vertical").parent().children(".content").each(function(){
scrollerHeight = ( $(this).parent().height() / $(this).prop("scrollHeight") ) * $(this).parent().height();
$(this).parent().children(".scrollbar").children(".scroller").css({
height:scrollerHeight
});
pad = $(this).css("padding-bottom").match(/[-\d]+/g)[0]*1+$(this).css("padding-top").match(/[-\d]+/g)[0]*1;
if($(this).prop("scrollHeight") - pad <= $(this).height()){
$(this).parent().children(".scrollbar").hide();
}
});
.example{
width:300px;
height:100px;
overflow:hidden;
position:relative;
background:#eee;
}
.content{
width:100%;
height:100%;
overflow:scroll;
padding:0 100px 100px 0;
margin:0 100px 100px 0;
float:left;
}
.scrollbar-vertical{
width:5px;
height:100%;
position:absolute;
float:left;
right:0;
}
.scrollbar{
transition:0.3s;
background:transparent;
}
.scrollbar:hover{
background:rgba(0,0,0,0.2) !important;
}
.scrollbar-vertical .scroller{
width:100%;
min-height:10px;
background:#333 !important;
}
.scrollbar-vertical:hover{
width:10px;
}
.scrollbar-horizontal{
height:5px;
width:100%;
position:absolute;
float:left;
bottom:0;
}
.scrollbar-horizontal:hover{
height:10px;
}
.scrollbar-horizontal .scroller{
height:100%;
min-width:10px;
background:#333 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "example">
<div class = "content">
content..<br>
content..<br>
content..<br>
content..<br>
content..<br>
content..<br>
</div>
<div class = "scrollbar scrollbar-vertical">
<div class = "scroller"></div>
</div>
</div>
This seems to work fine when the overflow-y: scroll is given for the .content but fails when overflow: scroll is given.
But even when the property overflow: scroll is given the scrollbar works fine in the developer mode in chrome browser.I have traced the problem to be the $(this).scrollTop() which is increased by 17 when not in developer mode.can anyone explain why this is happening? any help is appreciated
codepen
17px is the dimension of a scrollbar in Chrome on desktop (pointer type) displays. This amount of pixels is added to the actual dimension of your container when a scrollbar is present. And, in your example, it's present because you set it to always visible using overflow:scroll.
So the width of a vertical scrollbar is 17px. And the height of a horizontal scrollbar is 17px, in Chrome, on desktops.
The bars are hidden in developer mode because yo uhave pressed "Toggle device toolbar" - enabling preview of touch type devices when in developer mode. Therefore, Chrome adds mobile/touch scrollbars, which are rendered above the content and only visible when used. If your content does not require scrollbars (there's nothing to scroll) they are not shown at all, even if you set overflow: scroll; on the item.
You can toggle the device toolbar by pressing Ctrl + Shift + M while in developer mode.

how scroll length changes according to increase in the webpage length

Whenever the html page is of same dimension as the screen view scroll bar is not needed, as u go on adding the elements in the webpage(refer my code) and length of the page is greater than the view scroll bar appears and changes according to the web length increases.I have already seen how to find the scroll position using scrolltop() etc .but never understood how it appears.
simple dummy code
<html>
<head>
<style>
.box1{
height:50%;
width:100%;
border:1px solid black;
}
.box2{
height:50%;
width:100%;
border :1px solid black;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
page length increased
<html>
<head>
<style>
.box1{
height:50%;
width:100%;
border:1px solid black;
}
.box2{
height:50%;
width:100%;
border :1px solid black;
}
.box3{
height:50%;
width:100%;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</body>
</html>
I am curious of how the browser calculates scroll bar length(in %) according to the length of the page and how the scroll bar length increases/decreases based on the webpage .
Is there any mathematical formula (not sure)something like
calculate the whole length of page (length of elements) - (view dimension of the browser)/(by some unknown variable).
The browser takes the height of your screen (say 1000px), and calculates the percentage of the total document height. If the document height is 3000px, then the result is ~33%. Therefore the height of the scrollbar must be 33% of your screen height, which in pixels is 333px.
It may be something like this
var heightIs = parseInt( $(window).height() / ( $("body").height() / $(window).height() ) );
You get the ratio bewteen body height and window height and then divide the window height with that ratio.

Getting width of a child div with width 100% gives windows width

HTML:
<div id="parent">
<div id="child">
<div id="child1"></div> <!-- UPDATE -->
</div>
</div>
CSS:
#parent{
float:left;
width:90%;
}
/* UPDATE*/ #parent #child{
float:left;
width:100%;
}
/* UPDATE*/
/* In a different file*/
#child1{
float:left;
width:100%;
}
jQuery:
Say the width of the window is 1000px. So the width of #parent should be 900px. If I try to get the width of the #child1 it should also be 900px. But the below jQuery code returns 1000px.
jQuery("#child").width(); //UPDATE: returns 900px as width
jQuery("#child1").width(); //UPDATE: returns 1000px as width
I need 900px as result of the above statement.

div at bottom of the page?

How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.
Do you need something like this?
<div style="position:absolute; bottom:0;">Hi</div>
http://jsbin.com/ayaqo4
What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:
<body>
<div class="wrapper">content here!
<div class="push"></div>
</div>
<div class="footer">footer content</div>
</body>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
This is my personal favorite for sticky footers:
http://www.cssstickyfooter.com/
You need to use css,
div.pos_fixed_footer{
position:fixed;
bottom:0%;
right:0px;
background:transparent url(../img/bg_header.png) repeat scroll center top;
width:100%;
height:40px;
}
and then call in your script like this
<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>
I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.
Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Categories

Resources