javascript - 逐渐应用样式(过渡似乎无效)可能与js/jQuery一起使用？

我试图在滚动条中逐渐消失。当前，我如何使滚动条出现是通过在正文中添加一个类来将溢出更改为自动，但它看起来非常生涩/突然。

这是突然添加显示滚动条的类的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;
}

我怎样才能使这种过渡不那么突然？有没有更好的办法做到这一点，那就是添加类并删除该类。

最佳答案

滚动条可以通过-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');
    }
 });

demo

关于javascript - 逐渐应用样式(过渡似乎无效)可能与js/jQuery一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15846310/