While working on a web project, I suddenly noticed a random horizontal scroll pop-up near the banner area. I tried checking on the dev tools to see what was causing it but I couldn't find any lead. As you can see in image 1, the horizontal scroll pops up, but once you scroll down just a little bit. It starts to disappear (seen on image 2).
I hope someone can help me with this. This site needs to get deployed soon as it has a deadline.
While disabling the horizontal scroll is quite easy to implement, it is not recommended to use overflow-x: hidden;.
There is always a reason to why the site shows a horizontal scrollbar. I'd suggest finding out what exactly causes that behavior and rather fix it properly than trying to "hack" your way around it by disabling horizontal scrolling in itself.
You can simply add overflow-x:hidden using css but I must say it is not a good way of implementing it. There is a reason browsers has horizontal scroll.
So I suggest to find out the issue in your code, probably there should have a min-width or a fixed width in some element which cause to show a horizontal stroller in smaller device width.
So go to inspect elements and delete each of the wrappers one by one until you get the horizontal stroller disappear. This is the easiest way I follow to find the element which has the issue.
Related
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I'm using the Perfect Scrollbar jQuery app (http://www.yuiazu.net/perfect-scrollbar/) for this site:
http://thehummingbirdplace.com/
The scrollbar shows up when you hover over the News section, but it won't scroll down to reveal the content. I've used this scrollbar before successfully, so I'm stumped as to what is different now. I haven't been able to replicate this on a simpler page, when I experiment on another page it either works or just vanishes, so I'm not sure why it is successfully showing up, yet not scrolling on the main page.
I've tried taking out the second use of jQuery on the page too, just in case, but I get the same result.
Any help would be appreciated!!
The error was in the set up for the jQuery.noConflict(); command and has now been fixed
I'm working on the following project and I'm having a small problem with my entire page shifting about 5-10px when the page content goes beyond a certain lenght.
http://www.thewaymultimedia.com/IML/
I'm not sure what I"m missing, I've spent the past couple of hours looking at my CSS to see if I have an extra padding or margin but I cant narrow it down. Anyone a pro at CSS familiar with this problem.
If you go in the about menu and then click on 'board of directors" menu and you will see what i mean. If i reduce the content it will stop, but this page will require quite of bit of vertical real state.
Any suggestions. The website is using WordPress by the way
Is it possibly because it is going beyond the length of the window and is, therefore, needing a scroll bar?
That is due to the scrollbar...
does anybody know how to stop track pads from scrolling horizontally?
My website has a deliberate overflow which you navigate using some javascript scrollbars.
http://www.mitchellop.com
However, if viewed on a mac using firefox the twofinger touch pad scroll allows you to move horizontally even though the x-overflow is hidden.
Any ideas?
thanks.
I ran into this issue myself with a project I'm working on. Firefox has some pretty strange events when it comes to certain kinds of scrolling. A little digging turned up the MozMousePixelScroll event. Here's the code I used to squelch the horizontal two-finger scrolling:
window.addEventListener('MozMousePixelScroll', function(evt){
if(evt.axis === evt.HORIZONTAL_AXIS){
evt.preventDefault();
}
}, false);
Instead, you could move the inside content by either positioning relatively, and changing the left value, or using CSS transforms (which don't require a repaint, and are hence quicker).
This may or may not require lots of rewriting, but it will work.
Can we change the appearance of scroll bar? I mean we want to change the image of the scroll bar, so it can match our web theme. more specifically, i'm pointing at the scroll bar in
<div style=overflow:auto>
If it can't be done, then is there some other way to make our own "scroll bar", which use our own image?
Perhaps if we're insane enough, maybe we'll do it like this.
We make a bunch of <div> which contain an image of up arrow, scroll, down arrow, etc. And then we applied some function to each of them. off course the width of scroll will depend on the amount of the content.
Can somebody help?
Check out this site - I've heard good things about the method implemented, although I have never really bothered to create my own custom scroll bars.
You should be able to style in line with your own theme with a bit of experimentation.
There are plenty of custom scrollbar available in the jQuery plugin here is some
http://designhuntr.com/custom-jquery-scrollers/
I would suggest http://baijs.com/tinyscrollbar/