scroll top Wert ändert sich im Entwicklermodus

Question

Ich versuche, eine benutzerdefinierte Bildlaufleiste für meine Webanwendung zu erstellen.

Der Mechanismus für meine Scrollbar ist die Standard-Scrollbar rechts von 100px padding verschoben wird und es durch overflow:hidden des übergeordneten Container

$(".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(); 
 
    } 
 
});

.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; 
 
}

<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>

Dies als gut zu funktionieren scheint, versteckt die overflow-y: scroll gegeben für die .content aber schlägt fehl, wenn overflow: scroll gegeben ist.

Aber selbst wenn die Eigenschaft overflow: scroll gegeben ist, funktioniert die Bildlaufleiste im Entwicklermodus in Chrome Browser. Ich habe das Problem auf die $(this).scrollTop() verfolgt, die um 17 erhöht wird, wenn nicht im Entwicklermodus.Kann jemand erklären, warum das passiert ? jede Hilfe ist geschätzt

codepen

Answer 1

17px ist die Dimension eines Scrollbar in Chrome auf dem Desktop (Zeigertyp) wird angezeigt. Diese Pixelmenge wird der tatsächlichen Dimension Ihres Containers hinzugefügt, wenn eine Bildlaufleiste vorhanden ist. Und in Ihrem Beispiel ist es vorhanden, weil Sie es unter Verwendung von overflow:scroll immer sichtbar machen.

Die Breite einer vertikalen Bildlaufleiste ist also 17px. Und die Höhe einer horizontalen Bildlaufleiste ist 17px in Chrome auf Desktops.

Die Balken sind im Entwicklermodus ausgeblendet, weil Sie die "Werkzeugleiste umschalten" gedrückt haben, um die Vorschau von Touch-Geräten im Entwicklermodus zu aktivieren. Daher fügt Chrome mobile/Touch-Bildlaufleisten hinzu, die über dem Inhalt gerendert und nur bei Verwendung sichtbar sind. Wenn für Ihren Inhalt keine Bildlaufleisten erforderlich sind (es gibt keine Bildlauffunktion), werden sie überhaupt nicht angezeigt, auch wenn Sie overflow: scroll; für das Element festlegen.

Sie können die Geräteleiste umschalten, indem Strg +Umschalt +M während im Entwicklermodus drücken.