javascript - How can I fade in the scrollbar on hover (Webkit only) - Stack Overflow

admin管理员组

文章数量:1316834

I have a requirement to fade in scrollbars on hover of an HTML element that is overflowing. I can easily show and hide the scrollbars by switching between overflow: hidden and overflow: auto on the mouseenter and mouseleave events, however it's very abrupt and I can't think of an elegant way to fade it in.

So far I have:

$(".scrollable").mouseenter(function () {
    $(this).css("overflow", "auto");
});

$(".scrollable").mouseleave(function () {
    $(this).css("overflow", "hidden");
});

Any ideas if there is a nice way to do this?

PS. I'm only interesting in Webkit browsers where I can add styling to the native scrollbar.

I have a requirement to fade in scrollbars on hover of an HTML element that is overflowing. I can easily show and hide the scrollbars by switching between overflow: hidden and overflow: auto on the mouseenter and mouseleave events, however it's very abrupt and I can't think of an elegant way to fade it in.

So far I have:

$(".scrollable").mouseenter(function () {
    $(this).css("overflow", "auto");
});

$(".scrollable").mouseleave(function () {
    $(this).css("overflow", "hidden");
});

Any ideas if there is a nice way to do this?

PS. I'm only interesting in Webkit browsers where I can add styling to the native scrollbar.

• javascript
• html
• css
• webkit

Share Improve this question Follow asked Jun 4, 2013 at 15:20 magrittemagritte 7,6461010 gold badges6363 silver badges7979 bronze badges 2

• afair even Webkit browsers don't allow animations on styled scrollbars (fading in/out, etc)... – Dziad Borowy Commented Jun 4, 2013 at 16:09
• 1 I tried fading in ::-webkit-scrollbar with CSS3 keyframes, with jQuery's fadeIn and with jQuery's animate on opacity, but nothing works so I don't think it can be done. – Bram Vanroy Commented Jun 4, 2013 at 16:24

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I came up with an actual solution by using CSS masks and mimicking a fade in/out by using a large gradient and animating the position.

.content {
  padding: 17px 0 17px 17px;
  width: 300px;
  height: 150px;
  overflow-y: scroll;
  mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 17px, black 17px);
  mask-size: 100% 20000px;
  mask-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 17px, black 17px);
  -webkit-mask-size: 100% 20000px;
  -webkit-mask-position: left bottom;
  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}

.content:hover {
  -webkit-mask-position: left top;
}

@keyframes background {
  from {
    background: pink;
  }
  to {
    background: #c0d6ff;
  }
}

.wrapper {
  float: left;
  animation: background 5s infinite alternate;
}

<div class="wrapper">
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

The 17px should obviously not be hardcoded but based on measurement e.g.

const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');

const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;

console.log({ scrollbarWidth });

.outer {
   overflow: scroll;
}

<div class="outer">
    <div class="inner"><div>
</div>

As I said in the ments, I tried CSS3 solutions but they didn't work. It took me ages, but I found some sort of "cheat" to make this work. Create a div with the same background colour as the div. Give it the same width as the scrollbar (find width first) and make it fade out on load. This way it slowly reveals the scrollbar. Here is a fiddle: http://jsfiddle/BramVanroy/evJpR/

// We got the scrollbar width in w3

// create a div with scollbar width and append it to body
// we can't append it to the div because for some sort of z-index issues this does not work. Scrollbar will overlap the div
// make sure to give the div the same background-color as its parent
// get offset and width and height of div width scrollbar
var scrolled = $("body > div"),
    offL = scrolled.offset().left,
    offT = scrolled.offset().top + 1, // +1 for strange webkit pixel bug?
    thisW = scrolled.outerWidth(),
    h = scrolled.innerHeight(), 
    pos = offL + thisW - w3 - 1, // - 1 for strange webkit pixel bug?
    bgCl = "#fff";

$("<div />", {
    style: "width:" + w3 + "px; height:" + h + "px; background-color:" + bgCl + "; position: absolute; top:" + offT + "px; left: " + pos + "px;"
}).appendTo("body").fadeOut(3000);

Fun fact: it even works in FF, Chrome, IE 7-10!

I know its a bit late to the game, but I was looking for something like this and came up with the following, although I cant exactly get it to fade it hides when its inactive. Seems transitions don't work on this yet...

Here is a fiddle: http://jsfiddle/ethanpil/j7180ryv/

A bit of Javascript to Toggle The Hovering

$(window).scroll(function() {
    $('body').addClass('scrolling');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('body').removeClass('scrolling');
    }, 250));
});

CSS:

::-webkit-scrollbar {
    width: 6px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(242, 242, 242, 0);
}
::-webkit-scrollbar-thumb {
    background: rgba(221, 221, 221, 0);
    border-radius: 3px;
}
body:hover::-webkit-scrollbar-thumb {
    background: rgba(242, 242, 242, 1);
}
body.scrolling::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal:hover, 
::-webkit-scrollbar-thumb:vertical:hover {
    background: rgba(153, 153, 153, 1);
}
::-webkit-scrollbar-thumb:horizontal:active,
::-webkit-scrollbar-thumb:vertical:active {   
    background: rgba(153, 153, 153, 1);
}

I know its a very old post, but if someone else is looking for this, I realised there is a very simple solution for scrollbar appearing on hover, using -webkit.

.items::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /*make scrollbar space invisible */
    border-radius: 3px;
    height: 6px;
}
.items::-webkit-scrollbar-thumb {
    background: transparent; /*makes it invisible when not hovering*/
}
.items:hover::-webkit-scrollbar-thumb {
  background: grey; /*On hover, it will turn grey*/
}

It does not fade in, just appears, but you can do that by adding a transition.

Hope this code will help somebody

JQuery:

$('.breadcrumb').on('scroll', function() {
    var $this = $(this);

    $this.addClass('scrolling');

    if (scrolled) {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(function() {
            $this.removeClass('scrolling');
        }, 300); // 150 мс - время ожидания окончания скролла
    }

    scrolled = true;
});

SCSS:

.breadcrumb {
    justify-content: flex-end;
    flex-wrap: nowrap;
    list-style: none;
    margin-bottom: 16px;
    overflow-x: scroll;
    --bs-breadcrumb-item-padding-x: 2px;
    transition: .3s;

    &::after {
        content: '';
        display: block;
        position: absolute;
        height: 6px;
        width: 100%;
        left: 0;
        bottom: -1px;
        background-color: #fff;
        opacity: 1;
        transition: .3s ease-in-out;
    }

    &.scrolling::after {
        opacity: 0;
    }

    &::-webkit-scrollbar {
        height: 4px;

        &-track {
            border-radius: 20px;
            background-color: #FFFFFF;
            padding-bottom: 8px;

            &:hover {
                background-color: #FFFFFF;
            }

            &:active {
                background-color: #FFFFFF;
            }
        }

        &-thumb {
            background-color: #DEDEE0;
            border-radius: 99px;
            transition: .3s background-color;

            &:hover {
                background-color: #ABB6CC;
            }

            &:active {
                background-color: #ABB6CC;
            }
        }
    }
}

本文标签： javascriptHow can I fade in the scrollbar on hover (Webkit only)Stack Overflow