Hi, real good stuff. Exactly what I was looking for. Most solutions say to always display the scrollbar and I definately do not want to do this. Thanks for sharing!
I would like to suggest one minor change. Instead of adjusting the left margin if you adjust the right margin with a negative value you won’t have a gap in any div that paints across the entire page.
Thanks for the reply John. Using a wrapper sounds like a much better idea and is probably a cleaner solution for most people (in my case it won’t work because I’m using a sticky footer).
var root = document.compatMode == ‘BackCompat’ ? document.body
: document.documentElement;
var isVerticalScrollbar = root.scrollHeight > root.clientHeight;
if (isVerticalScrollbar || force) {
// Have to use margin for webkit browsers
// Enable this to offset from the left
// $(“#containerdiv”).css(“marginLeft”, getScrollerWidth() + “px”);
// Enable this to offset from the right
$(“#containerdiv”).css(“marginRight”, 0);
} else {
// Enable this to offset from the left
// $(“#containerdiv”).css(“marginLeft”, 0);
// Enable this to offset from the right
$(“#containerdiv”).css(“marginRight”, getScrollerWidth() + “px”);
}
}
Adjustments in the HTML:
… your content here….
————– Special case ———–
I have a sliding panel which is too fast is seems for the DOM adjustments so when using smooth open/close jQuery effects, I use this code:
// Expand Panel
$(“#open”).click(function(){
preventPageShift(true); // Force the offset + the scrollbar.
$(“html”).css(“overflow-y”, “scroll”);
$(“html”).css(“overflow-x”, “auto”);
// We can now safely slide without shaking since the scrollbar is already in place.
$(“div#panel”).slideDown(“slow”);
});
Personally, I never needed anything more than a line of CSS code: html { overflow-y: scroll; }
I know you said you don’t want it to be always displayed; seems like a fetish to me, but OK.
However, in my experience, you want this fix to apply when your scripts add/remove dynamic content that causes the page height to shift alternating the appearance of the scrollbar.
After a very quick glance at that script, it doesn’t look like you’re accounting for that most-needed case.
Thanks, I used this on my own website.
However it does not work perfectly on my website.
When going from a non scrollbar page to a scrollbar page on Firefox 6 on my Mac, the page jumps to the right a few pixels on page load. Going from a scrollbar page to a non scrollbar page (or non to non) works great.
I haven’t had time to test it on different browsers and OS.
Absolutely Elizabeth. There are two ways to add this to a wordpress site, the wordpress way and the easy way.
To do it the easy way simply create a .js file with this code in it, and add it to your themes header.php file in a tag, something like <script type="text/javascript" src="/js/newfile.js">
To do it the wordpress way you’ll want to google wp_enqueue_script.
Hi guys
We are having a problem with caret browing option in IE. Our website runs only on IE8, however when caret browsing is on in IE , scrollbar and cursor position is changing to bottom of page. Is there a way so it can be fixed, we dont want cursor or scrollbar to jum on sorting.
@Jeff: Hard for me to comment, sounds like you have an atypical structure to your website. My first thought would be trying to put your entire website inside one encapsulating div (for sake of example we’ll give it an id of “page”) and changing the code so instead of adding a margin to the Body, it adds it to the contained div.
IE change calls of document.body.style.marginLeft to document.getElementById(“page”).style.marginLeft
Hi i used this example i don’t know why it doesnot work for me. I just want to build like twitter pages with content sliding but the browser vertical scroll remain fix.
I'm a drawing of John Pezzetti, a web and graphics guy located in San Diego, CA.
This is my personal blog where I write primarily about building websites, design and illustration. If you're looking for someone who does such things then you should head on over to my company's website: Other Half Full.
If you want to get in touch then go ahead and contact me.
Mercenary for Hire
To check out my design & web work please head over to my company: Other Half Full, Inc..
Hi, real good stuff. Exactly what I was looking for. Most solutions say to always display the scrollbar and I definately do not want to do this. Thanks for sharing!
Great work! Thank you so much.
I would like to suggest one minor change. Instead of adjusting the left margin if you adjust the right margin with a negative value you won’t have a gap in any div that paints across the entire page.
Change:
document.body.style.marginLeft = scrollWidth+”px”;
To:
document.body.style.marginRight = “-“+scrollWidth+”px”;
This requires you to set the body overflow-x to hidden but that’s a lot better than having a big gap in the background.
Thanks again.
An excellent suggestion Mike, thank you.
You could also add the shift to a container div to avoid setting the body to overflow-x:hidden.
Thanks for the reply John. Using a wrapper sounds like a much better idea and is probably a cleaner solution for most people (in my case it won’t work because I’m using a sticky footer).
Thanks again
Great solution, thanks!
Thanks for this script guys!
The script as is didn’t work directly for me so I’ve added in comments 2 – 4.
(I am not using the overflow-x:hidden style).
Maybe other visitors can use this.
=========================================================
Adjusted javascript function:
function preventPageShift(force) {
var root = document.compatMode == ‘BackCompat’ ? document.body
: document.documentElement;
var isVerticalScrollbar = root.scrollHeight > root.clientHeight;
if (isVerticalScrollbar || force) {
// Have to use margin for webkit browsers
// Enable this to offset from the left
// $(“#containerdiv”).css(“marginLeft”, getScrollerWidth() + “px”);
// Enable this to offset from the right
$(“#containerdiv”).css(“marginRight”, 0);
} else {
// Enable this to offset from the left
// $(“#containerdiv”).css(“marginLeft”, 0);
// Enable this to offset from the right
$(“#containerdiv”).css(“marginRight”, getScrollerWidth() + “px”);
}
}
Adjustments in the HTML:
… your content here….
————– Special case ———–
I have a sliding panel which is too fast is seems for the DOM adjustments so when using smooth open/close jQuery effects, I use this code:
// Expand Panel
$(“#open”).click(function(){
preventPageShift(true); // Force the offset + the scrollbar.
$(“html”).css(“overflow-y”, “scroll”);
$(“html”).css(“overflow-x”, “auto”);
// We can now safely slide without shaking since the scrollbar is already in place.
$(“div#panel”).slideDown(“slow”);
});
// Collapse Panel
$(“#close”).click(function(){
$(“div#panel”).slideUp(“slow”);
$(“html”).css(“overflow-y”, “auto”);
$(“html”).css(“overflow-x”, “auto”);
preventPageShift();
});
Personally, I never needed anything more than a line of CSS code: html { overflow-y: scroll; }
I know you said you don’t want it to be always displayed; seems like a fetish to me, but OK.
However, in my experience, you want this fix to apply when your scripts add/remove dynamic content that causes the page height to shift alternating the appearance of the scrollbar.
After a very quick glance at that script, it doesn’t look like you’re accounting for that most-needed case.
True, the client site that I wrote this for had no need to account for changes in the length of the page from dynamic content.
It would be easy enough to factor in, however, by calling preventPageShift() in your ajax callback function
Thanks, I used this on my own website.
However it does not work perfectly on my website.
When going from a non scrollbar page to a scrollbar page on Firefox 6 on my Mac, the page jumps to the right a few pixels on page load. Going from a scrollbar page to a non scrollbar page (or non to non) works great.
I haven’t had time to test it on different browsers and OS.
What a beauty, worked like charm. Thanks for a great solution – not having to always show the scrollbar!
Excuse my ignorance, but will this work for a wordpress.org site and where does the code get pasted?
Thank you!
Absolutely Elizabeth. There are two ways to add this to a wordpress site, the wordpress way and the easy way.
To do it the easy way simply create a .js file with this code in it, and add it to your themes header.php file in a tag, something like
<script type="text/javascript" src="/js/newfile.js">To do it the wordpress way you’ll want to google wp_enqueue_script.
Good luck.
Thank you very much!
4 days trying to do does not work, was ready to accept the overflow-y:scroll; 🙂
Can’t seem to get thisto work. It shifts my content all the way to the left so that it is no longer centered. Any suggestions.
Hi guys
We are having a problem with caret browing option in IE. Our website runs only on IE8, however when caret browsing is on in IE , scrollbar and cursor position is changing to bottom of page. Is there a way so it can be fixed, we dont want cursor or scrollbar to jum on sorting.
Thanks
Pranav Sharma
@Jeff: Hard for me to comment, sounds like you have an atypical structure to your website. My first thought would be trying to put your entire website inside one encapsulating div (for sake of example we’ll give it an id of “page”) and changing the code so instead of adding a margin to the Body, it adds it to the contained div.
IE change calls of document.body.style.marginLeft to document.getElementById(“page”).style.marginLeft
@Pranav: Good luck.
Hi i used this example i don’t know why it doesnot work for me. I just want to build like twitter pages with content sliding but the browser vertical scroll remain fix.
Any help and suggestion for me please.
Still working? I kinda need a solution.