javascript - 创建水平滚动 ionic/angularjs

Question

我试图用 ionic 创建以下滚动导航，但不知何故导航不起作用并且样式不太正确。谁能帮助/指导我使用什么？这是我想要的:

这是我目前所拥有的，水平滚动列表，但上面更像是导航栏，当您触摸/选择它时，元素会移动到中心。

当第一个元素处于事件状态时，列表的左侧应保持为空。他们应该像导航一样滚动。到目前为止，我有水平列表，但无法将事件列表滚动到中心。

 <ion-scroll direction="x" class="wide-as-needed">
  <div ng-repeat="type in types" style='display: inline-block; margin: 5px;' >
    <a href="" id="anchor{{type}}" scroll-to="anchor{{type}}" class="button inline-button button-clear button-dark">{{type|uppercase}}</a>
  </div>
</ion-scroll>

指令是简单的 anchor 导航，尝试导航到元素本身到目前为止并不走运，它会导航到自身但只会使其可见而不是导航列表的中心:https://docs.angularjs.org/api/ng/service/$anchorScroll此外，这个 Angular $anchorScroll 被设计为垂直滚动而不是水平...

TabbedSlideBox也可以使用，但是这个插件在激活时也没有标签滚动到中心

Answer 1

更新以备将来引用我会把它留在这里。

你可以试试这个 http://demo.jankuri.com/ngSlimscroll/

但对我来说创建自定义指令很有帮助。

function center() {
    var currentElement = document.getElementById("active");
    currentElement.className = "center-menu";
    var nav = document.getElementById("nav");
    var navWidth = document.getElementById("nav2").offsetWidth;
    var margin = 0;
    for(var i =0; i<nav.children.length; i++){

        if(currentElement == nav.children[i]){
            console.log(nav.children[i]);
            break;
        }else {
            margin += nav.children[i].offsetWidth;
        }
    }
    nav.style.marginLeft = (navWidth/2 - margin - currentElement.offsetWidth);
}

CSS

nav {
  background: #9df0e8;
  overflow: hidden;
  border-bottom: 8px solid #40b5a2; 
  border-top: 2px solid #40b5a2;
  width: 80%;
  margin: 0 auto;
}

nav ul { margin: 0 0 2em;
margin-right:-999em;
white-space:nowrap; }

nav ul li { float: left; }

nav ul li a,
nav ul li span {
  display: block;
  background: #9df0e8;
  color: #345661;
  text-decoration: none;
  padding: 1em;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}

nav ul li a:hover,
nav ul li span:hover { background: #40b5a2; }

.arrow{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #9df0e8 transparent transparent transparent;
    display: none;
    position: absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
.center-menu .arrow{display: block;}