Question

我正在尝试为我的网络应用制作自定义滚动条

我的滚动条的机制是默认滚动条右移100px填充，它被父容器的overflow:hidden隐藏

＆＃13;

$(".scrollbar-vertical").parent().children(".content").scroll(function(){
    
    scrollerHeight = (  $(this).parent().height() / $(this).prop("scrollHeight") ) * $(this).parent().height();
    //pad = $(this).css("padding-bottom").match(/[-\d]+/g)[0]*1+$(this).css("padding-top").match(/[-\d]+/g)[0]*1;
    sTop = ( $(this).scrollTop()  / ( $(this).prop("scrollHeight") - $(this).outerHeight()  ) * ( $(this).height() - scrollerHeight) );
    console.log($(this).scrollTop());
    $(this).parent().children(".scrollbar").children(".scroller").css({
        margin:sTop+"px"+" 0 0 0"
    });
});
$(".scrollbar-vertical").parent().children(".content").each(function(){
    scrollerHeight = (  $(this).parent().height() / $(this).prop("scrollHeight") ) * $(this).parent().height();
    $(this).parent().children(".scrollbar").children(".scroller").css({
        height:scrollerHeight
    });
    pad = $(this).css("padding-bottom").match(/[-\d]+/g)[0]*1+$(this).css("padding-top").match(/[-\d]+/g)[0]*1;
    if($(this).prop("scrollHeight")  - pad <= $(this).height()){
        $(this).parent().children(".scrollbar").hide();
    }
});

＆＃13;

.example{
    width:300px;
    height:100px;
    overflow:hidden;
    position:relative;
    background:#eee;
}
.content{
    width:100%;
    height:100%;
    overflow:scroll;
    padding:0 100px 100px 0;
    margin:0 100px 100px 0;
    float:left;
}
.scrollbar-vertical{
    width:5px;
    height:100%;
    position:absolute;
    float:left;
    right:0;
}

.scrollbar{
    transition:0.3s;
    background:transparent;
}
.scrollbar:hover{
    background:rgba(0,0,0,0.2) !important;
}

.scrollbar-vertical .scroller{
    width:100%;
    min-height:10px;
    background:#333 !important;
}


.scrollbar-vertical:hover{
    width:10px;
}

.scrollbar-horizontal{
    height:5px;
    width:100%;
    position:absolute;
    float:left;
    bottom:0;
}

.scrollbar-horizontal:hover{
    height:10px;
}

.scrollbar-horizontal .scroller{
    height:100%;
    min-width:10px;
    background:#333 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "example">
    <div class = "content">
        content..<br>
        content..<br>
        content..<br>
        content..<br>
        content..<br>
        content..<br>
    </div>
    <div class = "scrollbar scrollbar-vertical">
        <div class = "scroller"></div>
    </div>
</div>

＆＃13;

＆＃13;
当为overflow-y: scroll提供.content但在给出overflow: scroll时失败时，这似乎工作正常。

但即使给出属性overflow: scroll，滚动条在chrome浏览器的开发者模式下也能正常工作。我已将问题追溯到$(this).scrollTop()，当不在开发者模式时，它增加了17。任何人解释为什么会这样？任何帮助表示赞赏

codepen

Answer 1

17px是Chrome桌面（指针类型）显示中滚动条的维度。当存在滚动条时，此像素数量将添加到容器的实际尺寸中。并且，在您的示例中，它存在是因为您使用overflow:scroll将其设置为始终可见。

因此垂直滚动条的宽度为17px。水平滚动条的高度为17px，在Chrome中，在桌面上。

条形图隐藏在开发人员模式中，因为您已按下“切换设备工具栏” - 在开发人员模式下启用触摸式设备的预览。因此，Chrome会添加移动/触摸滚动条，这些滚动条会在内容上方呈现，并且仅在使用时可见。如果您的内容不需要滚动条（没有可滚动的内容），即使您在项目上设置了overflow: scroll;，它们也根本不显示。

您可以在开发者模式下按 Ctrl + Shift + M 来切换设备工具栏。

在开发人员模式下滚动顶部值更改

1 个答案: