Create horizontal scroll ionic/angularjs

Question

I was trying to create following scroll navigation with ionic, but somehow navigation is not working and style is not quite right. Could anyone help/guide me on what to use? This is want I want:

This is what I have so far, horizontal scroll-able list, but above is more like navigation bar, item moves to center when you touch/select it.

When first element is active left side of the list should stay empty. They should scroll like navigation. So far I have horizontal list but scrolling active one to center is not working.

 <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>

directive is simple anchor navigation and trying to navigate to element itself so far not luck, it will navigate to itself but only makes it visible not center of navigation list: https://docs.angularjs.org/api/ng/service/$anchorScroll Also this angular $anchorScroll is designed to vertical scrolling not horizontal...

TabbedSlideBox can also be used, but this plugin also doesn't have tab scroll to center when active

karma · Accepted Answer · 2015-12-17 08:16:43Z

Update for future reference I will leave it here.

You can try to use this http://demo.jankuri.com/ngSlimscroll/

but for me creating custom directive from this helped.

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;}

Collectives™ on Stack Overflow

Create horizontal scroll ionic/angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related