I have certain images which are placed in div's in the ul tag. I get scroll bar for more than 3 images. Any chance that i can apply styles to the scroll bar .
You can style scrollbar's of webkit browsers
The css: Applicable for Chrome and safari
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background-color: #b46868;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #7c2929;
}
::-webkit-scrollbar-corner {
background-color: black;
}
Styling internet explorer which is a bit different :
body {
scrollbar-face-color: #b46868;
}
Mark that these will not work for non-webkit browsers. ex firefox
so, for non webkit browsers you need to use a jquery plugin.
For more help refer this site
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/
Related
I need to reduce the scroll bar width in my web page but not for the whole page. I am using one splitter and a grid in that page if height exceeds scrollbar occurs. How can I reduce the width of it. I have used the following styles
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
But these styles are applying for the whole page. Can anyone suggest me to resolve this issue?
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
More information: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
One option would be to use a class for parts of the webpage where you want to customize the scroll bar. For that class, let us say class='customScroll', you could define your css code:
.cuctomScroll {
overflow: scroll;
scrollbar-width: 20px; */for Mozilla support/*
}
.customScroll::-webkit-scrollbar {
width: 20px; */for Chrome and IE support/*
}
Edit 1: Here is the working example: https://jsfiddle.net/43o50m6a/6/.
Please feel free to ask any further clarifications.
I was trying this code below, it's working in all browsers include the IE browser, but the problem scrollbar was hidden in IPad and iPhone Devices & added CSS also for browser-specific still no luck !!!
Does anyone help how to solve this issue?
<object data="your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
It is normal for scrollbars to be hidden on mobile devices. But you can force them to appear by overriding the styles of ::-webkit-scrollbar-* properties.
This answer in another Stack Overflow thread provides an example:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
I am following this article on creating password strength meter. This is working fine in Firefox but it is not switching colors in the Chrome browser. I tried the accompanied code pen demo too and that also doesn't seem to be working in Chrome browser. Following is CSS styling for the meter element:
meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto 1em;
width: 100%;
height: .5em;
/* Applicable only to Firefox */
background: none;
background-color: rgba(0,0,0,0.1);
}
meter::-webkit-meter-bar {
background: none;
background-color: rgba(0,0,0,0.1);
}
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
Please suggest what might get changed in Chrome which is leading to this behaviour? I tried looking for any change in vendor prifixes but not able to find any.
There was a bug in Chrome at version 52 that caused -webkit-appearance:none; on the meter element to wipe out the coloured bar itself.
https://bugs.chromium.org/p/chromium/issues/detail?id=602928
Removing the -webkit-appearance property from the meter causes the coloured bar to show. Please see the fiddle below for an example:
https://jsfiddle.net/t58fnan9/1/
Edit:
The issue link above shows the issue as fixed. However, it has been re-opened here: https://bugs.chromium.org/p/chromium/issues/detail?id=632510
It actually shows for me perfectly.
update your browser and if you are up to date, clear your cache
Hey is it possible to make scrollbar "hidden" i dont wanna use overflow-y: hidden
just something like background: transparent or something like that
Here you will find a description how to hide the scrollbar just with CSS.
And here in the second example you will find a solution how to hide the scrollbar within a div for example.
The trick in the second example is to define a wider div container that the surrounding one.
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
Just play arround with the values of margin and padding.
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
u can change width / background-color and other properties .
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
this css code might work
In Webkit browsers:
::-webkit-scrollbar {
display: none;
}
This is my CSS for the custom style scroll-bar its works fine in chrome but not in Firefox browser.
how to make this CSS compatible in Firefox browser
<style>
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar {
height: 6px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius:10px;
}
</style>
Firefox scollbar style customization doesn’t work any more.
But you can try plugins that works in all browser.
Jscrollpane
Hesido
http://script-tutorials.com/custom-scrollbars-cross-browser-solution
http://manos.malihu.gr/jquery-custom-content-scroller
And also you can try below plugin only for firefox.
Noiascrollbars
hope this information helps you.