水平溢出导航保留项目在视图

我有一个导航栏水平溢出，我可以用手指在手机上滚动左/右。我还可以左右滑动主要观看区域，以更改选定的导航项目。当我这样做时，如果浏览项目不在视图中，除非您滚动，否则无法看到它。水平溢出导航保留项目在视图

如果在类.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

水平溢出导航保留项目在视图

回答

相关问题