水平溢出導航保留項目在視圖

我有一個導航欄水平溢出，我可以用手指在手機上滾動左/右。我還可以左右滑動主要觀看區域，以更改選定的導航項目。當我這樣做時，如果瀏覽項目不在視圖中，除非您滾動，否則無法看到它。水平溢出導航保留項目在視圖

如果在類.active中選擇了導航項，那麼我是否可以將導航項放入視圖中？

/* The main container */ 
.container .categories { 
    overflow: hidden; 
    overflow-x: scroll; 
    white-space: nowrap; 
    position: fixed; 
    line-height: 20px; 
    z-index: 200; 
    background: #000; 
    top: 50px; 
    width: 100vw; 
} 

/* The item within the container */ 
.container .categories span { 
    padding: 20px 15px; 
    display: inline-block; 
    font-weight: 300; 
    border-bottom: solid 4px transparent; 
    transition: border-bottom 0.2s ease-in-out; 
} 

/* The selected item */ 
.container .categories span.active { 
    border-bottom: solid 4px #f47d25; 
}

在.container .categories span.active有沒有一種方法，我可以確保該項目在當它是積極的看法？

這裏是小提琴：https://jsfiddle.net/x9wpbkrj/5/

來源

2016-09-21 Get Off My Lawn

如果您製作jsfiddle.net，這將會非常有幫助！ –

@SohaibMohammed我添加了一個小提琴。因爲您可以看到選定的項目不在視圖中（如果視圖足夠小）。我如何強制選擇的項目在視圖中？（除非用戶手動滑動左/右導航 –

https://jsfiddle.net/x9wpbkrj/4/

body { 
 
    color: white; 
 
} 
 

 
/* The main container */ 
 
.container .categories { 
 
    /*overflow: hidden;*/ 
 
    /*overflow-x: scroll;*/ 
 
    /*white-space: nowrap;*/ 
 
    /*position: fixed;*/ 
 
    line-height: 20px; 
 
    z-index: 200; 
 
    background: #000; 
 
    top: 50px; 
 
    width: 100vw; 
 

 
    /*display: inline-block;*/ 
 
} 
 

 

 
/* The item within the container */ 
 
.container .categories span { 
 
    padding: 20px 15px; 
 
    display: inline-block; 
 
    font-weight: 300; 
 
    border-bottom: solid 4px transparent; 
 
    transition: border-bottom 0.2s ease-in-out; 
 
} 
 

 

 
/* The selected item */ 
 
.container .categories span.active { 
 
    border-bottom: solid 4px #f47d25; 
 
}

<div class="container"> 
 
\t <div class="categories"> 
 
\t \t <span>Trending</span> 
 
\t \t <span>New & Updated</span> 
 
\t \t <span>Discover</span> 
 
\t \t <span>Most Played</span> 
 
\t \t <span>Staff Picks</span> 
 
\t \t <span>New & Updated</span> 
 
\t \t <span>Discover</span> 
 
\t \t <span>Most Played</span> 
 
\t \t <span>Staff Picks</span> 
 
\t \t <span>New & Updated</span> 
 
\t \t <span>Discover</span> 
 
\t \t <span class="active">Most Played</span> 
 
\t \t <span>Staff Picks</span> 
 
\t </div> 
 
</div>

來源

2016-09-21 18:41:52

這只是包裝線 –

有很多的項目，可能是你應該對這些項目進行分類！ –

這些是類別 –

看起來scrollIntoView可能是我要找的答案：

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

編輯

上述工作，但如果一個項目被部分地在視圖中，它不會滾動。如果我使用scrollLeft，它似乎工作得很好。

$('.container .categories')[0].scrollLeft = 
$(`.container .categories > span:nth-child(${offset + 1})`)[0].offsetLeft;

來源

2016-09-21 18:52:14

水平溢出導航保留項目在視圖

回答

相關問題