如何在悬停时淡入滚动条（仅限 Webkit）

问题描述 投票：0回答：5

我需要在悬停在溢出的 HTML 元素上时淡入滚动条。 我可以通过在 

overflow: hidden
和 
overflow: auto
事件上在 
mouseenter
和 
mouseleave
之间切换来轻松显示和隐藏滚动条，但是它非常突然，我想不出一种优雅的淡入方式。

到目前为止我已经：

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

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

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

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

javascript html css webkit
5个回答
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>

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 中运行！

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);
}


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


.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*/
}



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

    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


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;
            }
        }
    }
}


    
	

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.