Ember.js इतिहास पर स्क्रॉल करें, लिंक पर स्क्रॉल करें रीसेट करें




scroll html5-history (3)

मैंने अपने ही ऐप में इस समस्या को हल किया है।

यदि आप इसे उन जगहों में उपयोग करना चाहते हैं जिन्हें इसकी आवश्यकता है, तो बस एक मिक्सिन का उपयोग करें:

ember g mixin remember-scroll

फिर mixins/remember-scroll.js , इसके साथ बदलें:

import Ember from 'ember';

export default Ember.Mixin.create({

  scrollSelector: window,

  activate: function() {
    this._super.apply(this, arguments);
    var self = this;
    if( this.get('lastScroll') ){

      Ember.run.next(function(){
        Ember.$(self.scrollSelector).scrollTop(self.get('lastScroll'));
      });

    } else {
      Ember.$(this.scrollSelector).scrollTop(0);
    }
  },

  deactivate: function() {
    this._super.apply(this, arguments);
    this.set('lastScroll',Ember.$(this.scrollSelector).scrollTop());
  },

});

यदि आप चाहते हैं कि यह स्वचालित रूप से सभी मार्गों में मिश्रित हो, तो निम्नलिखित करें।

एम्बर सीएलआई में, एक नया आरंभक बनाएं

ember g initializer remember-scroll

इसके बाद initializers/remember-scroll.js , इस के साथ कोड की जगह:

import Ember from "ember";

var rememberScroll = Ember.Mixin.create({

  scrollSelector: window,

  activate: function() {
    this._super.apply(this, arguments);
    var self = this;
    if( this.get('lastScroll') ){

      Ember.run.next(function(){
          Ember.$(self.scrollSelector).scrollTop(self.get('lastScroll'));
      });

    } else {
      Ember.$(this.scrollSelector).scrollTop(0);
    }
  },

  deactivate: function() {
    this._super.apply(this, arguments);
    this.set('lastScroll',Ember.$(this.scrollSelector).scrollTop());
  },

});

export function initialize(/* container, application */) {
  Ember.Route.reopen(rememberScroll);
}

export default {
  name: 'remember-scroll',
  initialize: initialize
};

यदि आप प्रारंभिक संस्करण का उपयोग कर रहे हैं, तो आप ऊपर पहले मिक्सिन को निकाल सकते हैं

यह आपके सभी मार्गों को आखिरी स्क्रॉल स्थिति को याद रखना चाहिए (यदि आप पहले वहां आ चुके हैं), और जब आप वहां लौट आते हैं तब इसे लागू करें

यद्यपि मैं इसे सभी मार्गों में डाल देने की सलाह दूंगा, क्योंकि उपयोगकर्ताओं को पिछली स्क्रॉल की स्थिति में लौटने की उम्मीद नहीं हो सकती है, अगर कोई महत्वपूर्ण समय बीत चुका है, क्योंकि वे पिछले थे।

डैनियल एफ पीपियस ने इस समस्या को इस प्रकार बताया:

बहुत सी साइटों को यह गलत मिलता है और यह वास्तव में परेशान है जब उपयोगकर्ता ब्राउज़र के अग्रेषित या बैक बटन का उपयोग करके नेविगेट करता है तो स्क्रॉल की स्थिति समान होनी चाहिए क्योंकि पिछली बार वे पृष्ठ पर थे। यह कभी-कभी Facebook पर सही तरीके से काम करता है लेकिन कभी-कभी ऐसा नहीं होता है Google+ हमेशा आपकी स्क्रॉल स्थिति को खोने लगता है

इसलिए नए पृष्ठ पर ब्राउज़ करते समय स्क्रॉल को पृष्ठ के ऊपर रीसेट करने के बारे में पहले से ही कई प्रश्न हैं। एम्बर.जेएस की कुकबुक यह भी दिखाती है कि Route.activate कैसे करें। Route.activate :

export default Ember.Mixin.create({
  activate: function() {
    this._super();
    window.scrollTo(0,0);
  }
});

हालांकि यह केवल समस्या को आधा करना हल करता है जब उपयोगकर्ता बैक / फ़ॉरवर्ड बटन का उपयोग करता है, तो स्क्रॉल की स्थिति को पुनर्स्थापित नहीं किया जाएगा, लेकिन केवल रीसेट करें

इस को हल करने में काफी कुछ प्रयास किए गए हैं, बहुत से Ember.Controller अंदर स्क्रॉल की स्थिति को Ember.Controller हुए। Ember.Controller उदाहरण, उदाहरण के लिए इस आलेख में हालांकि यह केवल एक आंशिक समाधान है यदि नियंत्रक कई बार उपयोग किया जाता है, तो केवल एक स्क्रॉल राज्य को संरक्षित किया जाएगा।

पुरानी स्क्रॉल स्थिति को बहाल करने के डिफ़ॉल्ट ब्राउज़र कार्यान्वयन को संरक्षित कैसे किया जा सकता है? इस प्रकार, कुछ भी नहीं करें अगर Route.activate को एक html5 इतिहास राज्य परिवर्तन से शुरू किया गया था?


स्क्रॉल इतिहास को बहाल करने योग्य क्षमताओं के साथ स्क्रॉल करने के लिए इस एम्बर एडॉन एम्बर-राउटर-स्क्रॉल को स्थापित करें। यह ब्राउज़र के HistoryLocation API का उपयोग करता है, इसलिए यह बॉक्स के बाहर काम करता है।


मैंने जेरेमी टीएम के समाधान को यहां आम तौर पर प्रभावी बनाने के लिए मिला है हालांकि, मेरे अनुभव में deactivate विधि का उपयोग करते हुए lastScroll पर सेट वैल्यू में विसंगतियां lastScroll संक्रमण पर lastScroll करें, जबकि मार्ग की willTransition कार्रवाई विधि का उपयोग करते हुए सुसंगत सेट व्यवहार की ओर जाता है।

यहां उनके मिश्रण के लिए संशोधन है जो मेरे लिए बेहतर काम करता है:

import Ember from 'ember';

export default Ember.Mixin.create({
  activate: function() {
    this._super.apply(this, arguments);
    var self = this;

    if(this.get('lastScroll')){
      Ember.run.next(function(){
        Ember.$(window).scrollTop(self.get('lastScroll'));
      });
    } else {
      Ember.$(window).scrollTop(0);
    }
  },

  actions: {
    willTransition: function() {
      this._super.apply(this, arguments);
      this.set('lastScroll', Ember.$(window).scrollTop());
    }
  }
});

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