Scroll mobile horizontal nav on load

by lasha

HTML

<div class="container">
    <ul>
      <li><a href="#">Credit Cards</a></li>
      <li><a href="#">Banking</a></li>
      <li><a href="#">Loans</a></li>
      <li><a href="#">Investing</a></li>
      <li><a href="#">Citigold</a></li>
    </ul>

    <div class="dropdown"></div>
</div>

SCSS

.container {
  width: 270px;
  height: 50px;
  background-color: #fff;
  color: #333;
  font-family: arial;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    pointer-events: none;
    right: 0;
    width: 50px;
    height: 50px;    
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(238,238,238,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(238,238,238,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(238,238,238,1) 100%);
  }
  ul {
    padding: 0; margin: 0;
    white-space: nowrap;
    position: absolute;
    /* right: 0; */
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
  }
  li {
    display: inline-block;
    padding: 16px 14px;
  }
}

JavaScript

$container = $('.container');
$containerUl = $container.find('ul');

/* $containerUl.scrollLeft(1000); */
/* $container.find('ul').css({
	'position': 'relative',
  'right': 'auto'
}); */

$containerUl.delay(400)
	.animate({
		scrollLeft: 200
	}, 700)
  .delay(50)
  .animate({
		scrollLeft: 0
	}, 700);