Question

我试图逐渐淡入滚动条。目前，我如何制作滚动条是通过向主体添加一个类来将溢出更改为auto，但它看起来非常生涩/突然。

这是突然添加显示滚动条的类的JS代码：

var bodywidth = $('body').width();
var scrollwidth = 10;
$('body').mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    if(x>bodywidth-scrollwidth)
        $('body').addClass("auto");
    else
        $('body').removeClass("auto");
});

这是与这些条款相对应的CSS：

body
{
    margin:0;
    overflow:hidden;
}
.auto
{
    overflow:auto;
}

如何让这种转变不那么突然？有没有更好的方法来添加类和删除类。

Answer 1

可以通过-webkit-scrollbar自定义滚动条，但这不能动画（或者至少我没有成功），并且在其他浏览器中的支持很差。

另一种方法是在滚动条上方设置div，使其颜色与基础div相同，并使其逐渐透明以显示滚动条

html是：

<div class="container">
<div class="base">
<p>aaa   aaaaa aaaaa aaaaaaaa aaaa aaa aaa aaaa bbbbbb bbbbbb cccc cccc cccc
</p>
</div>
<div class="hide">
</div>
</div>

CSS是：

.base {
    width: 100px;
    background-color: white;
    top: 0px;
    position: absolute;
    height: 130px;
    overflow: hidden;
    padding-right: 20px;
}
.base.clipped {
    overflow: auto;
}


.hide {
    position: absolute;
    width: 19px;
    height: 100%;
    right: 0px;
    background-color: white;
    top: 0px;
    -webkit-transition: all 2s;
    z-index: 10;
}

.hide.clipped {
    background-color: transparent;
}

我一直在保留元素的类，但是添加了第二个类。我在具有滚动条的元素中设置了一个填充，以便在不重新排列布局的情况下为其提供空间。 hide元素可以用css转换，溢出不是。

javascript是

$("*").click(function(){
    var obj = $(".base");
    var hid = $(".hide");
    if (obj.hasClass("clipped")) {
        hid.removeClass("clipped");
        setTimeout(function() {
            obj.removeClass("clipped");
        }, 2000);
    } else {
        hid.addClass("clipped");
        obj.addClass('clipped');
    }
 });

逐渐应用样式（转换似乎不起作用）可能与js / jQuery？

1 个答案:

demo