0

我需要在溢出的 HTML 元素悬停时淡入滚动条。我可以通过在overflow: hidden和事件之间切换来轻松地显示和隐藏滚动条，但是它非常突然，我想不出一种优雅的方式来淡入它。overflow: automouseentermouseleave

到目前为止，我有：

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

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

如果有一个很好的方法可以做到这一点，有什么想法吗？

PS。我只对可以向本机滚动条添加样式的 Webkit 浏览器感兴趣。

4

4 回答 4

3

我想出了一个实际的解决方案，方法是使用 CSS 蒙版并通过使用大渐变和动画位置来模拟淡入/淡出。

.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>

17px 显然不应该是硬编码的，而是基于测量，例如

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>

于 2021-01-11T10:33:18.400 回答
1

正如我在评论中所说，我尝试了 CSS3 解决方案，但没有奏效。我花了很长时间，但我发现了某种“作弊”来完成这项工作。创建一个与 div 具有相同背景颜色的 div。给它与滚动条相同的宽度（首先找到宽度）并使其在加载时淡出。这样它会慢慢地显示滚动条。这是一个小提琴：http: //jsfiddle.net/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);

有趣的事实：它甚至适用于 FF、Chrome、IE 7-10！

于 2013-06-04T17:22:45.797 回答
1

我知道这对游戏来说有点晚了，但我一直在寻找这样的东西并想出了以下内容，尽管我不能完全让它褪色，当它不活动时它会隐藏起来。似乎过渡不适用于此...

这是一个小提琴：http: //jsfiddle.net/ethanpil/j7180ryv/

一点 Javascript 来切换悬停

$(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);
}
于 2015-02-24T09:26:07.497 回答
0

我知道这是一篇非常古老的帖子，但如果其他人正在寻找这个，我意识到有一个非常简单的解决方案可以让滚动条出现在悬停上，使用 -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*/
}

它不会淡入，只会出现，但您可以通过添加过渡来做到这一点。

于 2021-07-05T16:53:06.367 回答