水平スクロールフレックスボックス部門の端にスクロールインジケータを実装

Question

私のサイトでは、水平にスクロール可能なナビゲーションバーにフレックスボックスを使用しています。私はそれを実装するために、このブログ投稿の助けを使用するので、多かれ少なかれ、我々は同じコードを持っている：https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation

HTML：

<header class="scroll"> 
    <nav> 
    <a class="item" href="http://example.com/blog">Blog</a> 
    <a class="item" href="http://example.com/portfolio">Portfolio</a> 
    <a class="item" href="http://example.com/downloads">Downloads</a> 
    <a class="item" href="http://example.com/about">About</a> 
    <a class="item" href="http://example.com/contact">Contact</a> 
    </nav> 
</header> 

CSS：

.scroll { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; } 
.item { 
    flex: 0 0 auto; } 

ブログ投稿とはいえ含まれていませんでした何このバーがスクロール可能であり、その右側にもっと多くのコンテンツがあることを示すために、エッジ上のナビゲータにインジケータを追加する方法でした。

私はいくつかの解決策を探しましたが、ここで使用したflexbox技術にはうまく適合しません。これはどうしたらうまくいくのですか？浮きが必要でしょうか？前もって感謝します！

Answer 1

次のテクニックを使用できます。 どのように動作するかを示すためにこのplunkを作成しました。 https://embed.plnkr.co/XzDEedEsgS1hDDmVuccZ/

.scroll { 
    position: relative; 
} 

.scroll nav { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    position: relative; 
} 

.scroll:after { /* This is our indicator give it your custom style */ 
    content: ">>"; 
    position: absolute; 
    width: 20px; 
    right: 0; 
    top: 0; 
    color: #fff; 
    padding: 0 10px; 
    background: #333; 
} 

.item { 
    flex: 1 1 auto; 
    padding-right: 10px; 
    background: #fff; 
} 

.item:last-child { 
    position: relative; 
    z-index: 9; /* higher z-index to get it above the indicator */ 
}