Code for Chrome, Opera, Safari for scrollbar as below:
.scroll_bar::-webkit-scrollbar {
width: 20px;
}
.scroll_bar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0px 0px 6px #0067ab;
border-radius: 5px;
}
.scroll_bar::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0px 0px 6px #0067ab;
border-radius: 5px;
}
And what I should do for Firefox?
would you like to use this.
custom scroll bar using js
There is a solution to your problem on Mozilla Searchfox.
scrollbar[orient='vertical'] {
margin-left: -4px;
margin-top: 1px;
min-width: 3px;
max-width: 3px;
}
scrollbar[orient='vertical'] thumb {
max-width: 3px !important;
min-width: 3px !important;
}
Here you can see it on css tricks
Just change use -moz instead of -webkit
Related
when I have a web page with a scrollable content. With css property "overflow:auto" or "overflow:visible" the scrollbar is visible on desktop browsers, but when I open the page on mobile browsers the scrollbar appears only when I try to scroll.
Is there a way to make the scrollbar always visible on mobile devices? I have tried some JQuery libraries but none of them have worked.
The html code is trivial, I have a scrollable div with an IFrame inside:
<div id="wrapper">
<iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>
The css:
#wrapper{
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 500px;
height: 200px;
}
#frameContent{
width: 100%;
height: 100%;
}
Try adding the below to your CSS, note that this is webkit specific:
Demo Fiddle
::-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;
}
/* !important is needed sometimes */
::-webkit-scrollbar {
width: 12px !important;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
background: #41617D !important;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #41617D !important;
}
Add this css code - It will change the style of scrollbar in mobile devices only
For issues with Safari, IOS browsers,
Setting
-webkit-overflow-scrolling: auto
along with mentioned CSS above in other ::-webkit-scrollbar solutions here, works well
I have several divs side by side floating on left and spread on multiple lines:
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
.elem {
height: 300px;
width: 150px;
background-color: rgba(230,230,230,1);
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
margin: 20px;
padding: 10px;
float: left;
transition: all 0.5s ease;
}
.elem:hover {
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
margin: 10px;
padding: 20px;
background-color: rgba(130,230,230,1);
}
.w140 { width: 140px; }
.w70 { width: 70px; }
.w200 { width: 200px; }
.w50 { width: 50px; }
.grid {
width: 100%;
}
</style>
</head>
<body>
<div class="grid">
<div class="elem w140">elem1</div>
<div class="elem">elem2</div>
<div class="elem w200">elem3</div>
<div class="elem w50">elem4</div>
<div class="elem">elem5</div>
<div class="elem">elem6</div>
<div class="elem w70">elem7</div>
<div class="elem w50">elem8</div>
<div class="elem">elem9</div>
<div class="elem w200">elem10</div>
</div>
</body>
</html>
This works perfectly fine on firefox. But on Chrome (Version 55.0.2883.87 to be exact) when hovering some elements (for example the last one before a "line break"), the layout will get messed up during the transition duration.
How do I prevent this?
Fiddle at http://jsfiddle.net/d6rs6gsq/
I found a workaround referring to Animating margins and padding with CSS Transition causes jumpy animation
use css scale transform instead of manipulating the padding and margin values.
.elem {
height: 300px;
width: 150px;
background-color: rgba(230,230,230,1);
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
margin: 20px;
padding: 10px;
float: left;
transform:scale(1);
transition: all 0.5s ease;
}
.elem:hover {
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
transform:scale(1.1);
background-color: rgba(130,230,230,1);
}
http://jsfiddle.net/d6rs6gsq/2/
Hope it solves
It happens when the last element in the row animates with the one before it. Since the animation is ease and not linear, there are points during the combined animations when they create "corners" into which elements from next row are floating.
There are multiple ways to get rid of this unwanted effect. First, you shouldn't be animating padding or margin for grid elements. The rule of thumb in animation is: Never animate the space the element occupies, but only the element's rendered image. You want to use transforms or position:relative and top|right|bottom|left as none of these modify the space an element takes in document's flow.
However, the simplest solution in your case would be remove float:left from your .elem and apply: display:flex;flex-wrap:wrap; to your grid. The flex grid is smart enough to not break rows below based on inconsistencies in height of elements in previous row. It's one of the many advantages of the flexbox model over the box model.
Updated fiddle: http://jsfiddle.net/websiter/d6rs6gsq/3/
Generally in a scroll bar there will be up and down arrows at both ends in a vertical scroll bar.
Is there anyway to remove it so that only the scroll bar appears and not the arrows at both ends. Below is my CSS:
.scrollbar-vertical
{
top: 0;
right: 0;
width: 17px;
height: 100%;
overflow-x: hidden;
scrollbar-3dlight-color:#999;
scrollbar-arrow-color:white;
scrollbar-base-color:white;
scrollbar-face-color:#999;
border-radius:5px 5px;
}
By Assuming that you want to customize the browser scrollbar,
You can do this easily with some nice Jquery Plugins, or you can do the magic with css. But it only works on webkit browsers for now, Here is how
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Source: http://css-tricks.com/custom-scrollbars-in-webkit/
Else you can use a plugin. (Recommended)
As in an early comment, i suggest you use the niceScroller Plugin. That's nice and easy.
Source : http://areaaperta.com/nicescroll/
Simple Implementation
<script>
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
You can use below style in your css to hide scrollbar arrows,
::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
width: 0px;
}
or
::-moz-scrollbar-button, ::-webkit-scrollbar-button {
width: 0px;
}
visibility: collapse !important;
maybe ?
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/
How is should be:
http://thc-cup.ucoz.com/How_is_should_be_Chrome_and_Firefox.png
How bad it is on IE:
http://thc-cup.ucoz.com/How_bad_it_is_on_IE.png
Is there any way to make the avatar area display like on Chrome and Firefox?
Link: thc-cup.ucoz.com/forum/2-1-1
CSS from that box:
.postTdInfo {
text-align:center;
background:#e0e0e0;
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
Thanks!
I think this script can help you out CSS3 PIE