Ionic bug checking

image
Before scroll


After scrolling

There is no problem elsewhere, but if you scroll, there is a bug like the picture. What is the reason?

CODE1) INDEX.HTML

  <ion-nav-back-button style="color: black">
  </ion-nav-back-button>


  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left" style="color: black"></button>
  </ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

CODE2) Template INDEX.HTML

haha
Build_4220
<div id="container">
  <div style="background: white; margin: 0; padding: 15px 0 15px 0; height: 50px; border-bottom-style: solid; border-bottom-color: #cecece; border-bottom-width: 1px" ng-controller="IndexCtrl">
    <tab-slide-box>
      <div class="tsb-icons">
        <div class="tsb-ic-wrp">
          <ion-scroll direction="x" class="tsb-hscroll">
           haha
          </ion-scroll>
        </div>
      </div>
	</tab-slide-box>
	</div>
	</div>

	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />
	haha<br />

CODE3) js/routes.js
/**

  • Created by keni2415 on 2017-06-22.
    */
    angular.module(‘starter’)

.config(function($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state’s controller can be found in controllers.js
$stateProvider

.state('index', {
  url: '/index',
  templateUrl: 'templates/index.html'
});

$urlRouterProvider.otherwise(’/index’);

});

CODE4) js/itemcontroller.js
/**

  • Created by keni2415 on 2017-05-06.
    */
    angular.module(‘starter’)
    .directive(‘scrollWatch’, function($rootScope) {
    return function(scope, elem, attr) {
    var start = 0;
    var threshold = 50;
    var aaa = document.getElementById(“aaa”);
    aaa.style.visibility = “hidden”;

    elem.bind(‘scroll’, function(e) {
    if(e.detail.scrollTop - start > threshold) {
    $rootScope.slideHeader = true;
    aaa.style.visibility=“visible”;

     }else{
       $rootScope.slideHeader = false;
       aaa.style.visibility = "hidden";
     }
     console.log($rootScope.slideHeader);
     $rootScope.slideHeaderPrevious = e.detail.scrollTop - start;
     $rootScope.$apply();
    

    });
    };
    });

CODE5) js/zz.js
/**

  • Created by keni2415 on 2017-07-12.
    */
    angular.module(‘starter’)
    .controller(“IndexCtrl”, ["$scope",
    function($scope){

    $scope.tabs = [
    {“text” : “Bugs Checking”}
    ];

}
]);

What does chrome debugger say when you scroll over that icon.
Can you put it on a codepen?