Skip to content

Commit

Permalink
modified
Browse files Browse the repository at this point in the history
  • Loading branch information
kamlekar committed Nov 18, 2014
1 parent 1418c71 commit 53b57c1
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 22 deletions.
8 changes: 8 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,5 +71,13 @@ Some of the styles in the above css are necessary to let the scroll work.
}
</script>

###How I got this thought:

I got this thought, when I found solution to hide the default scrollbar (_using css_) which was the requirement for a post on [Stackoverflow](http://stackoverflow.com/a/16671476/1577396).

The solution was simple but that is how I got this thought :).

---------------------------------

If you find any issues, please file them in issues section.

74 changes: 52 additions & 22 deletions resources/slimscroll.css
Original file line number Diff line number Diff line change
@@ -1,56 +1,86 @@
/* custom stylesheet */
.wrapper.mac + .scrollBarContainer{
background-color: transparent;
}
.scrollBarContainer.animate .scrollBar{
transition: 2s opacity ease;
opacity: 0;
}
.scrollBarContainer:hover .scrollBar{
opacity: 0.5;
transition: none;
}
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
/* end of custom stylesheet */

/******************************************************/
/**************** important ***************************/
/******************************************************/

/* slim scroll attached stylesheet */
.contentHolder {
/* custom css here */
border: 1px solid #CCC;
margin-top: 20px;
/* end of custom css */
/* slim scroll necessary css properties */
display: inline-block;
line-height: 15px;
overflow: hidden;
position: relative;
height: 200px;
width: 380px;
border: 1px solid #CCC;
margin-top: 20px;
/* end of slim scroll necessary css properties */
/* [end] don't override the above properties here */
}
.wrapper {
/* custom css here */
padding: 5px;
/* end of custom css */
/* slim scroll necessary css properties */
overflow: auto;
position: absolute;
left: 0px;
top: 0px;
right: -18px;
bottom: 0px;
padding: 5px;
padding-right: 3px;
/* end of slim scroll necessary css properties */
/* [end] don't override the above properties here */
}
.scrollBarContainer{
/* custom css here */
background-color: #E1E1E1;
/* end of custom css */
/* slim scroll necessary css properties */
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 5px;
cursor: pointer;
/* end of slim scroll necessary css properties */
/* [end] don't override the above properties here */
}
.scrollBar {
/* custom css here */
background-color: #999999;
/* end of custom css */
/* slim scroll necessary css properties */
border-radius: 10px;
opacity: 0.5;
position: absolute;
right: 0px;
left: 0px;
top: 0px;
/* end of slim scroll necessary css properties */
/* [end] don't override the above properties here */
}
.wrapper.mac + .scrollBarContainer{
background-color: transparent;
}
.scrollBarContainer.animate .scrollBar{
transition: 2s opacity ease;
opacity: 0;
}
.scrollBarContainer:hover .scrollBar{
opacity: 0.5;
transition: none;
}
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}

/* end of slimscroll attached stylesheet */
/* [Note]: I suggest to add this important stylesheet below of all stylesheets in your html file */

0 comments on commit 53b57c1

Please sign in to comment.