逐渐应用样式(过渡似乎不工作)可能与js / jQuery

Question

我正在尝试逐渐淡出滚动条。目前，我如何使滚动条出现是通过添加一个类的主体，改变溢出为自动，但它看起来很不稳定/突然。

下面是突然添加显示滚动条的类的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来过渡，但是overflow不行。

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

演示