2015-10-19 16 views
19

मुझे कोणीय ऐप में स्क्रॉल करने में कोई समस्या है।वापस बटन दबाकर अन्य पृष्ठ पर जाने पर स्क्रॉल स्थिति रीसेट नहीं होगी

इस समय इसमें 2 पृष्ठ हैं: पहला पृष्ठ ग्राहकों की एक सूची है, आप उनमें से एक का चयन कर सकते हैं और इसका विवरण देख सकते हैं। दूसरा एक कंपनियों की एक सूची है, यह वैसे ही काम करता है।

मैं $location.path() का उपयोग करके उनके बीच नेविगेट करने के लिए एक पैनल का उपयोग कर रहा हूं। और ऐप में $window.history.back() का उपयोग करके बैक बटन भी है।

जब आप ग्राहकों या कंपनियों की सूची में से किसी एक आइटम का चयन करते हैं, और इसके बाद, जब आप बटन को दबाते हैं तो आपको स्क्रॉल स्थिति को पुनर्स्थापित करने के साथ पिछले पृष्ठ (ग्राहक या कंपनियों की सूची) पर वापस कर दिया जाता है। मैं मानक $window.history.back() सुविधा का उपयोग कर रहा हूं, कुछ भी कस्टम लागू नहीं किया गया है।

लेकिन यहाँ जहां समस्या होती है: अगर किसी भी दिशा में स्क्रॉल किए बिना बस स्क्रॉल स्थिति रीसेट नहीं होगा (मदों की अन्य सूची में) अन्य पृष्ठ पर जाएं। लेकिन अगर आप इसे थोड़ा सा भी स्क्रॉल करते हैं, तो इसकी स्थिति रीसेट हो जाएगी। इसके अलावा यदि आप बैक बटन का उपयोग नहीं करते हैं तो सब कुछ ठीक काम करता है।

तो, प्रश्न है: $window.history.back() का उपयोग करने के बाद किसी अन्य पृष्ठ पर जाने पर हम स्क्रॉल स्थिति को कैसे रीसेट कर सकते हैं?

मैं भी infinite-scroll प्लगइन का उपयोग कर रहा हूं, यदि यह महत्वपूर्ण है। लेकिन जब भी मैंने इसे बंद कर दिया, तब भी कुछ भी नहीं बदला, इसलिए मुझे लगता है कि समस्या प्लगइन के साथ नहीं है।

+0

आप की कोशिश की <शरीर स्वत: स्क्रॉल = "true">? –

+0

मेरे पास है, यह बहुत मदद नहीं करता है ... – renchan

+0

क्या आप इसे नेविगेट करते समय स्क्रॉल स्थिति को नए पृष्ठ के शीर्ष पर होना चाहते हैं? – Guillaume

उत्तर

2

मेरे पास पहले सिमलर मुद्दा था और सरल (लेकिन सुरुचिपूर्ण समाधान नहीं) के साथ आया था।

जब दृश्य बदल जाता है तो मैंने दायरे में रैपर स्क्रॉलटॉप मान स्टोर किया है। वापस जाने पर मैंने उस मूल्य को फिर से रैपर पर लगाया।

वास्तव में मुझे याद नहीं है कि यह बैक ब्रोशर बटन पर क्लिक करने पर कैसे व्यवहार करता है। आपको यह जांचना होगा।


बदलने देख सकते हैं और दुकान scrollTop मूल्य https://github.com/jedrzejchalubek/Reed/blob/master/src/app/controller/all.js#L20

angular.extend($scope.view, { 
    panel: false, 
    section: 'single', 
    single: el, 
    scrollPosition: $('#thumbs').scrollTop() 
}); 

वापस जा रहे हैं और पुन: लागू scrollTop मूल्य https://github.com/jedrzejchalubek/Reed/blob/master/src/app/directives/back-to-list.js#L14

scope.$apply(function() { 
    scope.view.section = 'list'; 
    scope.view.panel = false; 
}); 
$('#thumbs').scrollTop(scope.view.scrollPosition); 

परियोजना है GitHub पर, ताकि आप इसे स्कैन कर सकते हैं। शायद यह मदद करता है। https://github.com/jedrzejchalubek/Reed

0

आप अपने नियंत्रक की शुरुआत में फायरिंग फ़ंक्शंस द्वारा पुनः लोड ईवेंट को पकड़ सकते हैं, बशर्ते इन नियंत्रकों को Immediately Invoked Function Expression में लपेटा गया हो। इसलिए जैसा:

(function() { 


angular.module("pstat") 
     .controller("homeCtrl", homeCtrl); 

    homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http']; 
    function homeCtrl ($log, dataService, localStorageService, $http) { 
    var vm = this; 
    $(document).getElementById("yourId").scrollTop(0); 

    }); 
})() 

इस 0 लंबवत स्क्रॉल ऑफसेट जब नियंत्रक आरंभ नहीं हो जाता, इस पृष्ठ पर $ window.history.back घटना लैंडिंग पर अर्थात के लिए पेज के लिए बाध्य करेगा।

-1

यह है कि मैं क्या AngularJS ट्यूटोरियल से प्रसिद्ध phonecatApp में शामिल किया है और यह काम करता है:

phonecatApp.run(function($rootScope, $window) { 
     $rootScope.$on('$viewContentLoaded', function(){ 
      $(document).ready(function(){ window.scrollTo(0, 0); }); 
     }); 
    }); 
संबंधित मुद्दे