Perfect-scrollbar: diable the :hover on the scroll rails

Created on 9 Oct 2018  路  3Comments  路  Source: mdbootstrap/perfect-scrollbar

I have tried to look for an option to disable the hover effect when the mouse is over the scroll rails..

I just want to keep the scrollbars with a contant color and size

.ps__rail-x,
    .ps__rail-y {
      opacity: 0.6;
    }

Most helpful comment

@clarkk Try with this:

.ps .ps__rail-y:hover, .ps .ps--clicking {
  background:transparent!important;
  opacity: 0.6!important;
}

.ps__thumb-y {
  width:6px!important;
  background-color:#aaa!important;
}

All 3 comments

@clarkk did you ever figure this out? I to would like to do this.

I was able to add the following code to achieve what I think we both want, but it disabled clicking and scrolling.

.ps__rail-y{
    pointer-events: none;
}

@clarkk Try with this:

.ps .ps__rail-y:hover, .ps .ps--clicking {
  background:transparent!important;
  opacity: 0.6!important;
}

.ps__thumb-y {
  width:6px!important;
  background-color:#aaa!important;
}
.ps .ps__rail-x:hover,
.ps .ps--clicking {
  background: transparent !important;
  opacity: 0.6 !important;
}

.ps__thumb-x {
  height: 6px !important;
  background-color: #aaa !important;
}

if you're looking to disable the hover effect for a horizontally scrolling container

Was this page helpful?
0 / 5 - 0 ratings