Dojo ContentPanel

Question

का उपयोग करके किसी निश्चित स्थान पर स्क्रॉल करें My Dojo एप्लिकेशन जानकारी के विभिन्न बिट प्रदर्शित करने के लिए कुछ सामग्री पैन का उपयोग करता है। मुख्य फलक में स्क्रॉल करने योग्य डेटा की एक अच्छी मात्रा है। मुझे कुछ स्थानों पर कूदने के लिए बटन दबाए जाने की आवश्यकता है।

वर्तमान में उपयोग करते हुए:

dojo.byId(iid).scrollIntoView(); 

इस को छोड़कर यह नहीं बल्कि contentpanes 'शीर्ष से ब्राउज़र विंडो शीर्ष पर गणना के आधार के लिए लगता है कि पूरी तरह से काम करता है। चूंकि मेरा कंटेंटपैन पृष्ठ के शीर्ष पर नहीं है (शीर्ष पर एक 50px उच्च टूलबार है) जिस डीआईवी को मैं स्क्रॉल कर रहा हूं वह भी 50px बहुत अधिक है।

कुछ इस तरह काम करेंगे लेकिन scrollBy केवल खिड़की पर लागू होता है:

dojo.byId(iid).scrollIntoView(); //Scroll to div in quesiton 
dojo.byId(iid).scrollBy(0,50); //scroll down 50px more to account for panes offset from window. 

पूरा एप्लिकेशन की पृष्ठभूमि: एप्लिकेशन लेआउट के लिए कुछ dijit.layout.BorderContainer के उपयोग करता है। एक उपयोगकर्ता दाएं पैनल में एक घटना लाने के लिए बाएं पेड़ पर क्लिक कर सकते हैं। यदि वे "लक्ष्य" पर क्लिक करते हैं, तो मैं दाएं पैनल में सभी डोम नोड्स को गतिशील रूप से बना देता हूं, फिर आइटम पर क्लिक करने के लिए स्क्रॉल करने का प्रयास करता हूं। स्क्रॉलिंग भाग शीर्ष और निचले नोड्स के लिए काम करता है लेकिन मध्य नोड्स के लिए ऑफ़सेट होता है।

Answer 1

एक विकल्प dojox.fx.smoothScroll का लाभ लेने के हो सकता है।

उदाहरण: http://jsfiddle.net/kfranqueiro/6aNrp/

SmoothScroll पर एपीआई दस्तावेज़ बेशक कम है, लेकिन यह पैरामीटर आप इसे करने के लिए वस्तु में पारित कर सकते हैं के कुछ ही व्याख्या नहीं करता। http://dojotoolkit.org/api/dojox/fx/smoothScroll - आकस्मिक रूप से, एपीआई साइट एक ही काम करने के लिए dojox.fx.smoothScroll के एक संस्करण का उपयोग करती है।

Answer 2

यह सुनिश्चित नहीं है कि यह वैध है, लेकिन मैंने अभी djox.fx.scroll कोड लिया है और उपरोक्त वर्णित 'ऑफसेट' कार्यक्षमता को जोड़ा है (मुझे इसकी भी आवश्यकता है)।

मैंने क्रोम डीबगर का उपयोग करके dojox.fx.scroll कोड को छीनकर शुरू किया, और इसे मेरी स्क्रिप्ट फ़ोल्डर में एक नई .js फ़ाइल में चिपकाया।

मैंने डोजॉक्स/एफएक्स/स्क्रॉल से डोजॉक्स/एफएक्स/स्क्रॉलमोड से 'परिभाषित' स्ट्रिंग में नाम बदल दिया। मैंने .smoothScroll से .smoothScrollMod में संदर्भ भी बदल दिए।

<script src="scripts/dojoScrollMod.js" type="text/javascript"></script> 

और अंत में यह कहते हैं:

var dx = 0; //RW Custom Offsets 
var dy = 0; //RW Custom Offsets 
if (_8.offset) { 
    dx = _8.offset.x; 
    dy = _8.offset.y; 
} 

तो फिर तुम एक सामान्य स्क्रिप्ट की तरह अपने HTML फ़ाइल में इस फाइल संदर्भ:

define("dojox/fx/scrollMod", ["dojo/_base/kernel", "dojo/_base/lang", "dojo/_base/fx", 
"dojox/fx/_base", "dojox/fx/_core", "dojo/dom-geometry", "dojo/_base/sniff"], 
function (_1, _2, _3, _4, _5, _6, _7) { 
_1.experimental("dojox.fx.scroll"); 
var fx = _2.getObject("dojox.fx", true); 
_4.smoothScrollMod = function (_8) { 
    if (!_8.target) { 
     _8.target = _6.position(_8.node); 
    } 

    var dx = 0; //RW Custom Offsets 
    var dy = 0; //RW Custom Offsets 
    if (_8.offset) { 
     dx = _8.offset.x; 
     dy = _8.offset.y; 
    } 

    var _9 = _2[(_7("ie") ? "isObject" : "isFunction")](_8["win"].scrollTo), 
    _a = { x: _8.target.x + dx, y: _8.target.y + dy }; 

    if (!_9) { 
     var _b = _6.position(_8.win); _a.x -= _b.x; _a.y -= _b.y; 
    } 
    var _c = (_9) ? (function (_d) { _8.win.scrollTo(_d[0], _d[1]); }) : (function (_e) { _8.win.scrollLeft = _e[0]; _8.win.scrollTop = _e[1]; }); 
    var _f = new _3.Animation(_2.mixin({ beforeBegin: function() { 
     if (this.curve) { delete this.curve; } 

     var _10 = _9 ? dojo._docScroll() : { x: _8.win.scrollLeft, y: _8.win.scrollTop }; 
     _f.curve = new _5([_10.x, _10.y], [_10.x + _a.x, _10.y + _a.y]); 
    }, onAnimate: _c 
    }, _8)); 
    return _f; 
}; 
fx.smoothScrollMod = _4.smoothScrollMod; return _4.smoothScrollMod; 
}); 

मैं _4.smoothScrollMod विधि के लिए निम्न जोड़ा ऐसा (जैसा कि आप सामान्य रूप से करेंगे, लेकिन ऑफसेट ऑब्जेक्ट के साथ):

var sm = new dojox.fx.smoothScrollMod({ 
     node: dojo.query("mySelector")[0], 
     win: window, 
     easing: dojo.fx.easing.quadInOut, 
     offset: { "x": 0, "y": -200}, 
     duration: 800 
    }).play();