I know this sounds like a super redundant question, but its not. Whenever I search for this I only get results telling me to use overflow:scroll -which I am.
I've tried this in chrome, chrome canary, safari, and firefox. I have a div with fixed height and width, some pages require scrolling others do not so I am using overflow: scroll; but the scroll bars only show when you actually scroll down while hovering over the content. I want it to be painfully obvious to my visitors that there is more content. Is there a way to have the scrollbars literally always show (whether or not the user is hovering or scrolling at that moment).
A JS solution would be cool, this question has a neat trick to tell if the scrollbar is needed, but is there a JS function that always shows it? Is there a CSS function, pretty much anything would be cool.
Thanks in advance.
EDIT: After playing around with JS I found that if you use
content.scrollTop = 0;
some browsers will flash the scrollbar, and for the other browsers use:
content.scrollTop = 1;
content.scrollTop = 0;
You can try this:
Instead of
overflow:scroll;
try
overflow-x:hidden;
overflow-y:scroll;
Related
How do you disable horizontal scrolling on a webpage?
I understand that this question has been asked many times before on stackoverflow (here, for example).
The most common answer says use CSS to set overflow-x: hidden; or max-width:100% for the html/body elements. However, these seem to hide the scrollbar but still allow the user to scroll with middle clicks, trackpad swiping, and touchscreen swiping. I'm looking for a solution that allows NO horizontal scrolling of any form.
The next most common answer says don't make your content wider than the screen. Maybe this is a good answer, but in general it's not very helpful and in my particular situation I don't know how to make my content fit.
Are there better methods for preventing horizontal scrolling?
To give you an idea of the problem that's motivating my question, take a look at http://www.tedsanders.com/BetTheBill/. So that you can see the problem better, I have highlighted the offending svg element in gray. When you click the green 'Bet The Bill' button, the svg rotates. If your window is small, the corners of the gray rectangle sometimes end up pointing off the screen and make horizontal scrolling possible.
I've tested this issue on the current versions of Chrome, Android Chrome, Firefox, and IE11. Only IE11 gives the behavior I want, with no horizontal scrolling.
Edit: Thanks to your helpful answers, I now have a solution. I'm going to implement it soon, but unfortunately that means my link above, originally meant to illustrate the problem, will no longer illustrate the problem. Sorry to all future visitors! (Perhaps in hindsight I should have made a fiddle. Although who knows how long that will even last...)
Edit2: Beware, the javascript solution below does not necessarily work on mobile browsers (in my version of Android Chrome there is significant jitter).
Edit3: Aha! My friend told me that overflow: hidden; will indeed work, but it needs to applied to the parent div and not the body or html or another ancestor. This looks like the best solution!
Try this:
html {
overflow-x: hidden;
width: 100%;
}
body {
overflow-x: hidden;
width: 100%
}
I believe overflow-x: hidden; will only stop the particular element that it is applied to from scrolling, so outer-more elements can still cause the window to scroll. Applying it to html and body should prevent anything which exceeds the width and height of window from causing the window to scroll.
Adding width: 100%; will force the html and body tags to be exactly 100% the width of the window.
But in your example that's not the problem. For some reason the <div class="container"> sometimes displays another set of scrollbars just for the container and the scrollbars appearing and disappearing is what causes the container's movement.
You can fix it by adding to following:
/* overflow: hidden; stops the second set of scrollbars */
/* I increased the width by 300px and added 150px padding on either side. This stopped the grey background from disappearing when the pie chart rotated. */
.container {
overflow: hidden;
width: 930px;
padding-left: 150px;
padding-right: 150px;
}
var offset = window.pageXOffset;
$(window).scroll(function () {
if(offset != window.pageXOffset)
window.scrollTo(0, window.pageYOffset);
});
Also do not forget to hide overflow.
Aha! My friend gave me an answer so I came back here to post it for all of you. overflow: hidden; will indeed work, if it is applied to the parent div and not the body or html or another ancestor. And unlike the javascript solution kindly provided by user3796431, it even works on mobile.
I have a simple JSFiddle of a single floating header here:
http://jsfiddle.net/zT9KQ/
Basically, this uses translate3d to kick in the GPU and hardware accelerate the floating header so that it may be drawn more smoothly. The header jitters in the latest Safari but gets drawn perfectly fine in the latest Chrome, FF and Opera. The actual code that is being affected by this (the code that spurred this question) is code I've written that cannot be shared publicly but works in a similar manner where fixed positioning is, unfortunately, not a valid solution.
I have tried:
Setting the backface-visibility CSS property to none.
Setting the perspective CSS property to 1000.
Playing with requestAnimationFrame during the animation logic.
Throttling the scroll event callback.
Setting the translateZ transform to something higher than 0px.
But none of this has worked (or at least - it seems reasonable to assume the GPU has kicked in but the jittering persists). I noticed that two questions are already open that are identical this one I'm raising but no one has answered them:
Jitter in Sticky Header in Safari
Implementing fixed position in javascript causes jitter in Safari when scrolling
Is this a known bug? Is there a performance hole I'm not sealing up?
EDIT
I have been receiving a lot of questions as to why position: fixed is not a valid option. To directly reply to Antony's comment on the question itself:
I'm not emulating/reinventing position: fixed. If you look at the top-voted answer (as of this comment), you will see that this seems to be a Safari issue. The reason position: fixed is undesirable in this case is because the code in question must be able to support multiple floating headers that sit below each other and have a "container" range where there may be infinitely nested containers. Using fixed positioning not only makes the code more complicated in the case where these floating headers live in a container that horizontally scrolls but also makes the component more brittle overall (calculating offsets when the widget needs to sit within another container somewhere else on the page). So, semantically, absolute positioning fits my needs better than fixed.
SECOND EDIT
Upon thinking about what Antony had been telling me (that I may be reinventing the wheel), and after hearing about -wekbit-sticky from user3716477, I would like to update the question to show what I'm trying to do. You can see how my code behaves in every browser other than Safari here:
http://cl.ly/3y1i3C473G2G
I have learned:
You cannot rely on the scroll or really any scroll-like events (such as mousewheel) since they are asynchronous in nature. I submitted a bug to Apple detailing what was happening and they closed the bug for this reason.
There is no real way to do what I want as of now - to have multiple floating headers that stack and replace each other. I guess I'll have to wait for something like -webkit-sticky to come out.
I should include all relevant information in SO questions from here on out. :-P
Thanks for playing guys! Here's the exact response I received from Apple:
Apple Developer Relations09-Jun-2014 01:16 PM
Engineering has determined that there are no plans to address this
based on the following:
Code is using scroll events, which are asynchronous.
We are now closing this bug report.
If you have questions regarding the resolution of this issue, please
update your bug report with that information.
Please be sure to regularly check new Apple releases for any updates
that might affect this issue.
Since there is an apparent delay between scrolling with the trackpad and the scroll event firing, you can attach the handler to an additional mousewheel event to smoothen things up.
$scrollContainer.on('scroll mousewheel', function () {
// reinvent the wheel here
});
You can see in this demo here that jittering is far less likely to occur when you scroll with the trackpad. In the demo, I have invoked the handler on load to eliminate the flash when you first scroll on Safari. There may still be some occasional jitter, but if you want to minimize that, you can go the resource intensive way of using setInterval and requestAnimationFrame.
This might fix the problem for now, but as I have said before, this emulation approach is not ideal and you are very likely to run into more trouble down the road.
It appears to be a bug with Safari scrolling. If you drag the scrollbar manually (don't use the trackpad gesture to scroll), then there is no jittering.
Chrome (and other browsers) handle scrolling differently which is why this bug is only present on Safari. You might want to submit a bug report to Apple.
How about a little restructuring, like this:
http://jsfiddle.net/me2loveit2/zT9KQ/6/
html:
<div>
<h1>Header</h1>
<div class="container">
<div class="content"></div>
</div>
</div>
CSS:
.container {
height: 300px;
position: relative;
overflow-y:scroll;
}
.content {
height:1000px;
}
h1 {
position: relative;
top:0px;
left:0px;
margin: 0;
width: 100%;
background: black;
color: white;
}
If you are using something similar to the jiddle code you have to check if browser is safari and then make it a different way like:
$(function () {
var $header = $('h1'),
$container = $('.container'),
$scrollContainer = $('.scroll-container'),
scrollContainerOffset = $scrollContainer.offset().top;
$scrollContainer.on('scroll', function () {
var top = Math.max(0, $container.offset().top * -1 + scrollContainerOffset);
$header.css('top', top + 'px');
});
});
Even when it isn't the way you want your problem to be solved, it might be a workaround that may help...
Scroll events are sent asynchronously in various browsers; you should not rely on them to do things like this.
The best solution would be to use position:-webkit-sticky; top: 0;
You could try and disable all and any javascript-ish scroll handling and just simply remove
position: relative; from the .container.
Afterwards just add h1{ top:0; } and it will happily stick to the .scroll-container.
Excerpt from CSS absolute positioning:
Position it at a specified position relative to its closest positioned ancestor...
To explain - your absolute H1 will look up the tree for the first ancestor element which defines a "position" property and inherit it as a 0,0 reference point.
It could be a WTF at first, but this behaviour is a powerhouse once you tame it.
EDIT: Related to the original jsFiddle, I made some more property removals:
http://jsfiddle.net/253Ss/
^ .container wrapper could be removed as well, since it is no more neccessary in a technical sense.
Okay so I'm testing this in Safari, I'm sure it's the same in other browsers but I haven't checked (yet)!
This piece of script works great and is not jaggerdy or buggy at all:
$('body').css('overflow', 'hidden');
$(window).scroll(function() {
$(this).scrollTop(0).scrollLeft(0);
});
And this is what I need, but it seems to be very buggy and jaggerdy when you try and scroll, it scrolls a bit and the corrects itself (within about 100 milliseconds) whereas the above script doesn't let you scroll at all.
$('body').css('overflow-x', 'hidden');
$(window).scroll(function() {
$(this).scrollLeft(0);
});
Is this a known bug or is there a fix at all?
EDIT:
For those of you who are looking for an answer, there actually isn't one. This is only a known bug in Safari (most possibly only on Mac too).
The whole idea for an overflow:hidden is that it won't scroll. Hence you hide the scroll bars. Try overflow-x:auto and see if that scrolling is still jittery. If that ends up working you can hide the scroll bars with something like this example
EDIT: Why not put the .inside to be overflow:hidden via styles (that way you don't need the scrollTop function. Then when you need the area to scroll you can use the jQuery to update the CSS to make it back to overflow:auto.
Does that defeat the whole purpose of the task you are trying to code?
I'm pulling my hair out over this. I have a webpage where I'd like to have a fixed position div on the left (the parrot & translater) follow the page as it scrolls down.
http://www.cartoonizemypet.com/new/help/
I managed to follow this tut http://jqueryfordesigners.com/fixed-floating-elements/ and get what I thought was a perfect effect! Then I tried viewing it on my phone.... As soon as I zoomed in the blasted div moved over the text! :( You can see the affect on a regular browser by shrinking the browser window and scrolling to the right.
Does anyone know a way to prevent the parrot from moving horizontally? I've been searching high and low for a solution but it's starting to seem impossible.
Here's the relevant CSS
#content {
padding-top:20px;
padding-bottom:713px; /* Height of the footer element */
width:888px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#help-col1 {
left:0;
width:218px;
position:absolute;
height:500px;
}
#parrot-box {
position:absolute;
top:0;
margin-top: 20px;
}
#parrot-box.fixed {
position:fixed;
top:0;
}
#help-col2 {
width:634px;
float:right;
}
Feel free to check out the page source (http://www.cartoonizemypet.com/new/help/) to see the SCRIPT and HTML. Any help would be MUCH appreciated.
When the parrot gets the 'fixed' class, The parrot (inside #help-col1) has a 'left' value of 0. This means he's always going to be attached to the left side of the page... no matter what the dimensions of the window are, and how it scrolls.
What you're asking for is for him to behave like a fixed positioned element when the user scrolls vertically, but not horizontally. As far as I know, this isn't possible. Fixed is fixed... x and y.
However, there are some solutions (like this one) that talk about using javascript to get over this problem. The theory here is that a little javascript can listen to when the page has been horizontally scrolled and if it has, nudge the parrot back into place accordingly.
Personally, I'd look into using css media queries to make a mobile specific layout. You can assign specific CSS for the mobile version of the site, so hopefully the user doesn't need to zoom (or horizontally scroll) at all =)
Good luck!
JS scroll event listener has been suggested, but all implementations relying on it are systematically laggy. I reckon you would have better luck using media queries to determine whether or not fixed positioning is appropriate (i.e. OK if the window/device is wide enough, or substitute with an alternative behaviour if not).
You could actually leave the parrot at the top for narrow screens and preserve some real estate as well as address older mobile Safari versions' inability to correctly interpret position:fixed. You could certainly implement out a more refined approach, but this should be a good starting point - to try it out, execute the following script on your page (just in the console is fine):
$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>');
First it overrides the original #parrot-box.fixed declaration, and then applies your floated styling to whenever the window is at least 982px wide (your page wrapper width).
Not to worry everyone, my husband figured out an alternative way of making this work! :)
Rather than moving the parrot with the page; I'm going to have multiple versions of the parrot inside the answer divs. That way when a user clicks on an answer it pops open and the parrot appears beside it.
Not how I originally had it planned out, but I think I can make this new way look even better!
Thanks for the help at any rate! :)
I'm trying to stretch the background to fill the whole window with HTML/CSS.
I've seen a few solutions for this but they don't work.
Every solution i encounter won't work on all the browsers, either Chrome won't stretch it, or IE won't stretch it, and if they both do, firefox will be the problematic one.
Does anyone have a working solution, that will work on all browsers ? (don't mind some javascript)
I believe there is no way to do this without creating an img element, and setting its z-order to the bottom and then customizing the width of that. This page has details.
Edit: In the link it says to use position: fixed;. This will in only work in older versions of IE if you specify a doctype. Using absolute is a simple workaround as long as the element is a direct child of the body.
I had this problem a little while ago and I found that this website http://webdesign.about.com/od/css3/f/blfaqbgsize.htm had a very nicely written tutorial which explains it well, plus it worked for what I was looking for.
http://reisio.com/temp/stretch/
write a css for that in which the background image will be in body.like
body {
background-image: url("/images/bg.jpg");
background-repeat: no-repeat;
background-position:center top ;
}
This will keep the total image in the body.Try this hope it will work.