2

我正在尝试逐渐淡出滚动条。目前，我如何使滚动条出现是通过向主体添加一个将溢出更改为自动的类，但它看起来非常生涩/突然。

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

我怎样才能使这种转变不那么突然？有没有更好的方法来添加类和删除类。

4

1 回答 1

2

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

我一直保留元素的类，但添加了第二个类。我在将具有滚动条的元素中设置了一个填充，以便在不重新排列布局的情况下为其留出空间。隐藏元素可以用 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');
    }
 });

演示

于 2013-04-11T16:56:35.693 回答