jQuery scorrimento: rilevare fine e iniziare

Question

EDIT >> Plunker: http://plnkr.co/edit/LY7LUAylvKQ3pIv9lhYM?p=preview

Ho implementato jQuery Scroll per tab-titoli, funziona bene.

Se io sono all'inizio della freccia sul lato sinistro dovrebbe scomparire e quando mi muovo a destra che dovrebbe essere mostrato. Se sono alla fine, la freccia sul lato destro dovrebbe scomparire.

Come è possibile rilevare i punti di inizio e fine? Voglio essere in grado di reagire al ridimensionamento delle finestre.

Questi sono i pulsanti: non

$('#nextTabBtn').click(function() { 
    var $target = $('.tabBoxMantle'); 
    if ($target.is(':animated')) return; 
    $target.animate({ 
     scrollLeft: $target.scrollLeft() + 300 
    }, 800); 
}); 


$('#prevTabBtn').click(function() { 
    var $target = $('.tabBoxMantle'); 
    if ($target.is(':animated')) return; 
    $target.animate({ 
     scrollLeft: $target.scrollLeft() - 300 
    }, 800); 
}); 

Answer 1

sono troppo familiarità con angolare, ma ancora ho dato una prova per risolvere il problema

ho creato la funzione per attivare o disattivare Prec Tab e Tab Avanti Pulsante come segue

function ShowPreviousTabBtn() { // handles prev tab button visibility 
    var $targetScroll = $('.auTabBoxMantle'); 
    if ($targetScroll.scrollLeft() == 0) 
    $('#prevTabBtn').hide(); 
    else 
    $('#prevTabBtn').show(); 
} 
function ShowNextTabBtn() { // handles next tab button visibility 
    var $targetScroll = $('.auTabBoxMantle'); 
    var $scrollwidthtotal = $targetScroll[0].scrollWidth; 
    var $scrolledwidth = $targetScroll.width() + $targetScroll.scrollLeft(); 
    if ($scrollwidthtotal <= $scrolledwidth) 
    $('#nextTabBtn').hide(); 
    else 
    $('#nextTabBtn').show(); 
} 

codice di lavoro completo del vostro app.js è riportata qui sotto

angular.module('myApp', []) 

.controller(

    "MainController", 
    function($scope, $http, $window, $document, $location, $anchorScroll) { 

    $scope.my = {}; 
    $scope.my.title = "jQuery Scroll Example"; 


    $http.get('data.json') 
     .success(function(data) { 
     $scope.my.tabs = data; 
     }); 

    function ShowPreviousTabBtn() { 
     var $targetScroll = $('.auTabBoxMantle'); 
     if ($targetScroll.scrollLeft() == 0) 
     $('#prevTabBtn').hide(); 
     else 
     $('#prevTabBtn').show(); 
    } 

    function ShowNextTabBtn() { 
     var $targetScroll = $('.auTabBoxMantle'); 
     var $scrollwidthtotal = $targetScroll[0].scrollWidth; 
     var $scrolledwidth = $targetScroll.width() + $targetScroll.scrollLeft(); 
     if ($scrollwidthtotal == $scrolledwidth) 
     $('#nextTabBtn').hide(); 
     else 
     $('#nextTabBtn').show(); 
    } 

    // Initially hide the previous Tab button 
    ShowPreviousTabBtn(); 
    // Hiding the Next Tab if the Items div is not overflown 
    ShowNextTabBtn(); 

    $('#nextTabBtn').click(function() { 

     var $target = $('.auTabBoxMantle'); 
     if ($target.is(':animated')) return; 
     $target.animate({ 
     scrollLeft: $target.scrollLeft() + 300 
     }, 800) 
     .promise().done(function() { // used as a callback function for animate 
     ShowPreviousTabBtn(); 
     ShowNextTabBtn(); 
     }); 

    }); 

    $('#prevTabBtn').click(function() { 
     var $target = $('.auTabBoxMantle'); 
     if ($target.is(':animated')) return; 
     $target.animate({ 
      scrollLeft: $target.scrollLeft() - 300 
     }, 800) 
     .promise().done(function() { // used as a callback function for animate 
      ShowPreviousTabBtn(); 
      ShowNextTabBtn(); 
     }); 
    }); 

    } 


); 

Spero che questo funzioni per voi :)