I have some images in my div. I want to scroll that with a horizontal bar; I would like the scroll bar to be an image. Also how I can change the color and the shape of the default scroll bar?
I used to edit the safari, chrome scroll bars using webkit and there are many examples about that.
But For image scroll bars on all browsers you will need some javascript.
May be jquery scrollbar
It used to be (is?) possible to set colours of scrollbars in IE, Opera and Konqueror. However it didn't look good.
You may use JavaScript, however it is very bad idea.
You have to hide standard scrollbars somehow.
You have to implement mouse wheel, some keyboard actions: arrows, Page Up, Down...
There will be problems with mobile browsers.
There may be problems with zooming whole page or text without images.
There may be some problems with obscure browsers.
The final experience could be worse than with standard scrollbars.
You may look for some kind of JavaScript gallery too. With horizontal scrolling but without scroll bars.
Related
I'm developing a website. I have a button that I want to be fixed in the right-bottom corner. The problem is, in mobile browsers, it gets covered by the navigation bar:
The bar sometimes hides while user is scrolling. Can reappear again.
This happens both on Android/Chrome and iOs/Safari.
Is there an elegant way to script the element so it would always be displayed in full and stuck just in the corner of the shown part of the website?
I think the mobile browsers does hides the bar when it is scrolling down and shows it when you scroll up.
Maybe move the location of the button when scrolling up with JS or something.
Has anyone come up with a good solution that shows the scrollbar on overflowY: scroll and also add custom styling to the scrollbar and track on firefox?
I've tried some jQuery plugins but they don't seem to show the scroll bar even if you're not hovering on the elemen AND be able to have custom styling on the scrollbar.
Example here:
https://codepen.io/hellojessicagraham/pen/vawJOo
Desired result on chrome
Not so desired on Firefox..
On chrome and safari the scroll bars show but on firefox the scroll bar only shows when you hover on the element, also there is no custom styling
What is the cleanest solution for this if there is a "clean" solution
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I cannot figure out why, but on certain pages like:
http://www.serif.cz/folio.htm
the menu shifts just a bit to the left of where it appears on the rest of the site:
http://www.serif.cz/
I have compared the HTML and it looks exactly the same.
Any ideas?
Its the scroll bars. Firefox and Chrome do not display scroll bars unless the content actually needs to scroll. IE will display a disabled scroll bar if the content does not scroll.
You can add a disabled scroll bar to pages that do not have content long enough for a scroll by using the following CSS:
body{overflow-y:scroll;}
Or you can just kind of accept the fact that it's going to do it on those pages. It's just one of those things where it makes sense why it's happening, it's just annoying. :)
http://louisehall.clanteam.com/ is the website in question.
I designed this homepage to be horizontal scrolling only, which works on certain size monitors. However obviously on small browser windows the vertical scroll bar appears meaning the layout is ruined when the user scrolls down i.e. the 'Louise Hall' image and the navigation bar appear over the images.
I have done some research, however the answers I have found haven't really helped. It may be my amateur CSS knowledge but you catch my drift.
If you look at this website for example: http://www.banksy.co.uk/outdoors/outusa/horizontal_1.htm
The navigation area is fixed no matter what size the browser window.
Is there anyway I can fix the 'Louise Hall' and navigation bar horizontally (as it is now) but then make it scroll vertically.
Thanks
Josh
That fixed is achieved using position: fixed.
However, in the example you linked to, they are using frames. I wouldn't recommend using frames.