मेरे पास जेक्यू में एक तीव्र (अभी तक आश्चर्यजनक रूप से सरल) यूआई है जहां यूआई की स्थिति के लिए एंकर की आवश्यकता होती है।

समस्या आईओएस/क्रोम (वेबकिट) और विभिन्न अन्य ब्राउज़रों में है। जब किसी एंकर पर लगभग 50% समय क्लिक किया जाता है तो a टैग क्रोम यूआरएल एड्रेस बार को नीचे की ओर स्लाइड करने के लिए ट्रिगर करेगा, फिर से दबाएं और वह चला जाए। ऑफसेट गंभीर नहीं ब्यूनो है।

जैसा कि आप उम्मीद करेंगे कि यह यूआई स्थिति को गड़बड़ कर देगा और पता बार ऑफसेटिंग भविष्यवाणी करना मुश्किल है क्योंकि यह एक डिवाइस + स्क्रीन आकार प्रतिक्रिया है।

मुझे लगता है कि यह एक बग है जब पहले टुकड़े का उपयोग किया जाता है जहां पहले कोई नहीं था या एक खंड राज्य का परिवर्तन (नया या बदला हुआ)। ये क्रियाएं, या इसी तरह, ब्राउज़र को "एक टैग क्लिक किया गया, यूआरएल बार सक्रिय करें" बता रहा है।

मुझे यह समाधान (सीएसएस) पसंद है लेकिन यह समस्या का समाधान नहीं करता है क्योंकि पता बार विश्वसनीय रूप से भविष्यवाणी करने के लिए एक तत्व नहीं है (जब तक कि मैं एक छोटी सी समस्या के लिए जेएस की मूर्खतापूर्ण राशि नहीं लिखना चाहता):

https://stackoverflow.com/a/13184714/860715

मैं लंबे समय तक चलने वाले पूर्ण स्क्रीन एपीआई को छोड़ रहा हूं क्योंकि सभी मोबाइल में वह सुविधा नहीं होती है।

मेरा वर्तमान समाधान, अब परीक्षण में, onclick="return;" को a टैग में UI एंकरिंग करना है। ऐसा लगता है कि यह विधि एंकर गतिविधि को कैप्चर करती है और पता बार ट्रिगर करने वाले a टैग को छोड़ देती है।

विभिन्न मोबाइल ब्राउज़रों के लिए UI में बेहतर समाधान और/या संभावित मुद्दों पर विचार।


समाधान के लिए Thx to Louys Patrice Bessette, एक छोटे से संपादन की आवश्यकता थी:

$(document).ready(function(){
    $("a").on("click", function(e){
      if( $(this).attr("href").substr(0,1) == "#" && $(this).attr("href").length > 1 ){
        var targetPos = $(document).find("a[name='"+$(this).attr("href").substr(1)+"']").offset().top;
        $("html, body").scrollTop(targetPos);
        e.preventDefault();  // this was moved -<-<
    }
});});
0
Marc 22 अगस्त 2017, 21:18

1 उत्तर

सबसे बढ़िया उत्तर

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

$(document).ready(function(){
  $("a").on("click", function(e){

    // It the href attribute begins with # and is not ONLY #
    if( $(this).attr("href").substr(0,1) == "#" && $(this).attr("href").length > 1 ){

      // Prevent the default anchor behavior.
      e.preventDefault();

      // Get the offset of the target a having the name attribute matching the href of the clicked anchor.
      var targetPos = $(document).find("a[name='"+$(this).attr("href").substr(1)+"']").offset().top;

      // Scroll the page to that position.
      $("html, body").scrollTop(targetPos);
    }
  });
});
0
Louys Patrice Bessette 22 अगस्त 2017, 22:06
वास्तव में दिलचस्प विचार। मैं इसे आज़माउंगा लेकिन मुझे लगता है कि क्रोम व्यवहार अभी भी रास्ते में आ सकता है। मैं स्क्रीन-वर्टिकल आकार देखने के लिए कुछ जेएस में ड्रॉप करने जा रहा हूं क्योंकि एड्रेस-बार आता है और जाता है। जैसे ही यह परिनियोजन में आगे बढ़ेगा, वापस रिपोर्ट करेगा।
 – 
Marc
23 अगस्त 2017, 22:52
क्या यह बेहतर नहीं है अगर एड्रेस बार बेकार में "आओ और जाओ" नहीं ?? ;) उपरोक्त समाधान ऐसा करना चाहिए।
 – 
Louys Patrice Bessette
23 अगस्त 2017, 23:09
1
ठीक है, काम पर लग गया, e.preventDefault(); गलत जगह पर था, scrollTop का पालन करने की जरूरत है। क्रोम/वेबकिट आईओएस, क्रोम ओएसएक्स, एफएफओक्स ओएसएक्स पर परीक्षण किया गया। यह समाधान वही है जिसकी मैं उम्मीद कर रहा था, लेकिन मेरी समस्या कुछ व्यवहार रखने और दूसरों को नकारने की थी। अच्छा काम/thx। मूल में सुधार पोस्ट किया गया।
 – 
Marc
24 अगस्त 2017, 02:44