javascript - AngularJS - Horizontally scrolling div indicators -

i'm building angularjs (among other things) powered site table in it, bit wide display on devices smaller screens. therefore made horizontally scrollable when parent element, page's main content block, narrow fit table div.

html:

<fieldset ng-show="tels.length > 0">     <div class="table-wrapper">         <div class="table" ng-repeat="type in types">             <div class="form-group control-group"                 ng-repeat="tel in tels | filter:{type:type.name} | orderby:'label'">                 <div>{{tel.label}}</div>                 <div>{{tel.value}}</div>                 <div>{{tel.description}}</div>                 ...             </div>         </div>     </div> </fieldset> 

css:

.table-wrapper {     margin-bottom: 10px;     overflow-x: auto; }  .table-wrapper .table {     table-layout: fixed;     min-width: 500px;     padding-right: 12px;     margin-bottom: 15px; }  .table-wrapper .table > div {     margin-right: 0px;     margin-left: 0px; } 

this works, because scrollbar isn't visible, , there's not cut-off content hint @ table being scrollable, want add indicators dynamically when it's possible scroll table, this or this (but horizontally)

to monitor table's scroll position, added watcher angular code:

$scope.$watch($('.table-wrapper'), function() {     var scrolled = angular.element('.table-wrapper').scrollleft();     $log.info("scrolled: " + scrolled); }); 

this seem log table's horizontal position, initially:

scrolled: 0 

it doesn't update when scroll table, though dom element's scrollleft property reflect position when inspected.

strangely, following jquery code log horizontal scroll position upon scrolling, , can work in jsfiddle (reduce size of output screen):

$(document).ready(function() {     $('.table-wrapper').on('scroll', function() {         var scrolled = $('.table-wrapper').scrollleft();         console.log("scrolled: " + scrolled);     }); }); 

no such luck in angularjs. doing wrong?

below code not work in case, try using events scrollbar or use bootstrap table-responsive class

$scope.$watch($('.scroll-horizontal'), function() {     var scrolled = angular.element('.scroll-horizontal').scrollleft();     $log.info("scrolled: " + scrolled); }); 

try using

    function logscroll(ev){       if(window.pageyoffset>400)alert('user has scrolled @ least 400 px!');     }     window.onscroll=logscroll