Box-shadow überlagernde Bildlaufleiste des Kind-Containers

Question

So arbeite ich auf einer Seite, wo das gewünschte Verhalten auf dem Handy ist, alle Links horizontal im Nav angezeigt zu haben, und über Überlauf ausgeblendet werden, wenn sie gemeinsam zu breit sind. Um dem Benutzer anzuzeigen, dass auf dem Bildschirm weitere Elemente vorhanden sind, habe ich einen weißen Feldschatten mit Deckkraft hinzugefügt, der die verdeckten Links leicht verdeckt. Derzeit wird dieser Schatten mit der Schaltfläche JETZT KAUFEN zu einem angrenzenden Container hinzugefügt. Hier

ist ein codepen das aktuelle Verhalten zeigt:

http://codepen.io/thecox/pen/wWWrej?editors=1100

WENIGER

.sticky-nav-menu { 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    width: auto; 
    height: 100%; 
    margin: 0; 

    li { 
    display: inline-block; 
    white-space: nowrap; 
    padding-right: 25px; 
    margin-right: 0; 

    &.active a { 
     color: fade(@jet-dark, 80); 
    } 

    &:last-of-type { 
     margin-right: 0; 
    } 
    } 
} 

.sticky-nav-overflow { 
    height: 100%; 
    margin-right: 4%; 
    overflow: scroll; 
} 

.sticky-nav-mobile { 
    padding-left: 2%; 
    z-index: 1; 
    box-shadow: -10px 0 5px 13px rgba(255, 255, 255, 1); 
} 

HTML

<nav class="sticky-nav js-sticky-nav clearfix"> 
    <div class="sticky-nav-inner"> 
    <div class="sticky-nav-overflow"> 
     <ul class="sticky-nav-menu"> 
     <li class="active"> 
      <a href="#lorem" class="sticky-nav-link">THE LOREM</a> 
     </li> 
     <li> 
      <a href="#lorem" class="sticky-nav-link">THE IPSUM</a> 
     </li> 
     <li> 
      <a href="#lorem" class="sticky-nav-link">THE CAESAR SALAD</a> 
     </li> 
     <li> 
      <a href="#lorem" class="sticky-nav-link">THE RIO GRANDE</a> 
     </li> 
     </ul> 
    </div> 
    <div class="sticky-nav-mobile"> 
     <a href="#" class="sticky-nav-cta">BUY NOW</a> 
    </div> 
    </div> 
</nav> 

Verkleinere den Bildschirm auf 400px oder niedriger (Ich sehe dieses Verhalten hauptsächlich in Firefox, Größe geändert mit Devtools) und du wirst sehen, dass, wenn der Link-Container ganz nach rechts gescrollt wird, die Bildlaufleiste vom Box-Schatten verdeckt wird auf eine unattraktive Weise. Ich frage mich, ob jemand darüber nachdenkt, wie das mit der derzeitigen Struktur gelöst werden könnte. Oder irgendeine andere Methode, die bessere Ergebnisse liefern könnte.

Alle und alle Antworten werden geschätzt. Danke für deine Hilfe!

Answer 1

Wenn ich richtig verstanden habe, ist das Problem Box Shadow Abdeckung scrollen auf Bildschirmen unter 400px. Sie können dies vermeiden, indem Sie den Wert für den Randwert auf Bildschirmen beispielsweise von 4% auf 8% ändern.