আইওএস 8-এ থাকা সাফারি স্ক্রোল করছে যখন স্থির উপাদানগুলি ফোকাস পায়

Question 1

আইওএস 8 সাফারিতে পজিশন সহ একটি নতুন বাগ রয়েছে।

আপনি যদি কোনও নির্দিষ্ট প্যানেলে থাকা কোনও টেক্সারিয়াকে ফোকাস করেন তবে সাফারি আপনাকে পৃষ্ঠার নীচে স্ক্রোল করবে।

এটি সমস্ত ধরণের UI এর সাথে কাজ করা অসম্ভব করে তোলে, যেহেতু আপনার পৃষ্ঠাটি পুরোপুরি নিচে স্ক্রল না করে এবং আপনার জায়গাটি হারিয়ে না ফেলে টেক্সারিয়াসে পাঠ্য প্রবেশের কোনও উপায় নেই।

এই বাগটি পরিষ্কার-পরিচ্ছন্ন করার কোনও উপায় আছে কি?

#a {
  height: 10000px;
  background: linear-gradient(red, blue);
}
#b {
  position: fixed;
  bottom: 20px;
  left: 10%;
  width: 100%;
  height: 300px;
}

textarea {
   width: 80%;
   height: 300px;
}

<html>
   <body>
   <div id="a"></div>
   <div id="b"><textarea></textarea></div>
   </body>
</html>

Question 2

এই সমস্যার এই ভাল বিশ্লেষণের উপর ভিত্তি করে , আমি এটিকে htmlএবং bodyCSS এর উপাদানগুলিতে ব্যবহার করেছি :

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

আমি মনে করি এটি আমার পক্ষে দুর্দান্ত কাজ করছে।

Question 3

আমি যে সর্বোত্তম সমাধানটি সামনে আসতে পারি তা হ'ল position: absolute;ফোকাসে ব্যবহার করা এবং এটি যখন ব্যবহার করছিল তখন অবস্থানটি গণনা করা position: fixed;। কৌশলটি হ'ল focusইভেন্টটি খুব দেরিতে আগুন লেগেছে, তাই touchstartঅবশ্যই ব্যবহার করা উচিত।

এই উত্তরের সমাধানটি আইওএস 7-এ আমাদের খুব সঠিকভাবে নিযুক্ত সঠিক আচরণের নকল করে।

প্রয়োজনীয়তা:

bodyযখন উপাদান পরম অবস্থান পরিবর্তন করা উপাদান অর্ডার সঠিক পজিশনিং নিশ্চিত করার জন্য পজিশনিং থাকতে হবে।

body {
    position: relative;
}

কোড ( সরাসরি উদাহরণ ):

নীচের কোডটি প্রদত্ত পরীক্ষার ক্ষেত্রে একটি প্রাথমিক উদাহরণ এবং আপনার নির্দিষ্ট ব্যবহারের ক্ষেত্রে এটি মানিয়ে নেওয়া যায়।

//Get the fixed element, and the input element it contains.
var fixed_el = document.getElementById('b');
var input_el = document.querySelector('textarea');
//Listen for touchstart, focus will fire too late.
input_el.addEventListener('touchstart', function() {
    //If using a non-px value, you will have to get clever, or just use 0 and live with the temporary jump.
    var bottom = parseFloat(window.getComputedStyle(fixed_el).bottom);
    //Switch to position absolute.
    fixed_el.style.position = 'absolute';
    fixed_el.style.bottom = (document.height - (window.scrollY + window.innerHeight) + bottom) + 'px';
    //Switch back when focus is lost.
    function blured() {
        fixed_el.style.position = '';
        fixed_el.style.bottom = '';
        input_el.removeEventListener('blur', blured);
    }
    input_el.addEventListener('blur', blured);
});

তুলনা করার জন্য হ্যাক ছাড়াই এখানে একই কোড ।

গুহাত:

যদি position: fixed;উপাদানের পাশাপাশি অবস্থানের সাথে অন্য কোনও প্যারেন্ট উপাদান থাকে তবে bodyস্যুইচ করতে position: absolute;অপ্রত্যাশিত আচরণ হতে পারে। প্রকৃতির কারণে position: fixed;এটি সম্ভবত কোনও বড় সমস্যা নয়, যেহেতু এই জাতীয় উপাদানগুলিকে বাসা বাঁধাই সাধারণ নয়।

প্রস্তাবনাগুলি:

touchstartইভেন্টটির ব্যবহার বেশিরভাগ ডেস্কটপ এনভায়রনমেন্টগুলি ফিল্টার করে দেবে, আপনি সম্ভবত ব্যবহারকারী-এজেন্ট স্নিফিং ব্যবহার করতে চাইবেন যাতে এই কোডটি কেবল ভাঙা আইওএস 8 এর জন্য চালিত হয়, এবং অন্যান্য ডিভাইস যেমন অ্যান্ড্রয়েড এবং পুরানো আইওএস সংস্করণগুলিতে নয়। দুর্ভাগ্যক্রমে, আমরা এখনও জানি না যে অ্যাপল আইওএস-এ এই সমস্যাটি কখন ঠিক করবে, তবে পরের বড় সংস্করণে এটি ঠিক না করা থাকলে আমি অবাক হব।

Question 4

আমি এমন একটি পদ্ধতি খুঁজে পেয়েছি যা পরম স্থানে পরিবর্তনের প্রয়োজন ছাড়াই কাজ করে!

সম্পূর্ণ নিরঙ্কিত কোড

var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});
var savedScrollPos = scrollPos;

function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];
  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }
  return false;
}

$('input[type=text]').on('touchstart', function(){
    if (is_iOS()){
        savedScrollPos = scrollPos;
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });
        $('html').css('overflow','hidden');
    }
})
.blur(function(){
    if (is_iOS()){
        $('body, html').removeAttr('style');
        $(document).scrollTop(savedScrollPos);
    }
});

এটা ভেঙে

প্রথমে আপনার HTML এর পৃষ্ঠার শীর্ষ দিকে স্থির ইনপুট ক্ষেত্রটি থাকা দরকার (এটি একটি নির্দিষ্ট উপাদান তাই এটি যেহেতু এটি শীর্ষের কাছাকাছি থাকার অর্থ নির্ধারণী হওয়া উচিত):

<!DOCTYPE HTML>

<html>

    <head>
      <title>Untitled</title>
    </head>

    <body>
        <form class="fixed-element">
            <input class="thing-causing-the-issue" type="text" />
        </form>

        <div class="everything-else">(content)</div>

    </body>

</html>

তারপরে আপনার বর্তমান স্ক্রোলের অবস্থানটি বৈশ্বিক চলকগুলিতে সংরক্ষণ করতে হবে:

//Always know the current scroll position
var scrollPos = $(document).scrollTop();
$(window).scroll(function(){
    scrollPos = $(document).scrollTop();
});

//need to be able to save current scroll pos while keeping actual scroll pos up to date
var savedScrollPos = scrollPos;

তারপরে আপনার আইওএস ডিভাইস সনাক্ত করার একটি উপায় প্রয়োজন যাতে এটি এমন জিনিসগুলিকে প্রভাবিত করে না যা ফিক্সের প্রয়োজন হয় না (ফাংশনটি নেওয়া হয়েছে) https://stackoverflow.com/a/9039885/1611058 )

//function for testing if it is an iOS device
function is_iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  while (iDevices.length) {
    if (navigator.platform === iDevices.pop()){ return true; }
  }

  return false;
}

এখন আমাদের যে যা দরকার সবকিছু আছে তা এখানেই ঠিক আছে :)

//when user touches the input
$('input[type=text]').on('touchstart', function(){

    //only fire code if it's an iOS device
    if (is_iOS()){

        //set savedScrollPos to the current scroll position
        savedScrollPos = scrollPos;

        //shift the body up a number of pixels equal to the current scroll position
        $('body').css({
            position: 'relative',
            top: -scrollPos
        });

        //Hide all content outside of the top of the visible area
        //this essentially chops off the body at the position you are scrolled to so the browser can't scroll up any higher
        $('html').css('overflow','hidden');
    }
})

//when the user is done and removes focus from the input field
.blur(function(){

    //checks if it is an iOS device
    if (is_iOS()){

        //Removes the custom styling from the body and html attribute
        $('body, html').removeAttr('style');

        //instantly scrolls the page back down to where you were when you clicked on input field
        $(document).scrollTop(savedScrollPos);
    }
});

Question 5

প্রয়োজনীয় নির্বাচনের উপাদানগুলিতে ইভেন্ট শ্রোতার যোগ করে আমি নির্বাচিত ইনপুটগুলির জন্য এটি ঠিক করতে সক্ষম হয়েছি, যখন প্রশ্নে নির্বাচন প্রশ্নাবলীতে ফোকাস হয় তখন একটি পিক্সেলের অফসেট দিয়ে স্ক্রোল করে।

এটি অগত্যা কোনও ভাল সমাধান নয়, তবে আমি এখানে অন্যান্য উত্তরগুলির চেয়ে অনেক সহজ এবং নির্ভরযোগ্য। ব্রাউজারটি অবস্থানটিকে পুনঃ-রেন্ডার / পুনরায় গণনা বলে মনে হচ্ছে: স্থির; উইন্ডো.স্রোলবি () ফাংশনে সরবরাহ করা অফসেটের উপর ভিত্তি করে বিশিষ্টতা।

document.querySelector(".someSelect select").on("focus", function() {window.scrollBy(0, 1)});

Question 6

মার্ক রায়ান সালির পরামর্শ দেওয়ার মতো, আমি দেখতে পেয়েছি যে গতিশীলভাবে আমার পটভূমির উপাদানটির উচ্চতা এবং ওভারফ্লো পরিবর্তন হচ্ছে মূল - এটি সাফারিটিকে স্ক্রোল করতে কিছুই দেয় না।

সুতরাং মডেলের উদ্বোধনী অ্যানিমেশন শেষ হওয়ার পরে, পটভূমির স্টাইল পরিবর্তন করুন:

$('body > #your-background-element').css({
  'overflow': 'hidden',
  'height': 0
});

আপনি যখন মডেলটি বন্ধ করেন এটি আবার পরিবর্তন করুন:

$('body > #your-background-element').css({
  'overflow': 'auto',
  'height': 'auto'
});

অন্য উত্তরগুলি সহজ প্রসঙ্গে ব্যবহার করার ক্ষেত্রে, আমার ডিওএম সম্পূর্ণ / স্থির অবস্থানের অদলবদলটি ব্যবহার করতে খুব জটিল ছিল (ধন্যবাদ শেয়ারপয়েন্ট)।

Question 7

পরিষ্কারভাবে? না

একটি স্টিকি শিরোনামে একটি স্থির অনুসন্ধানের ক্ষেত্রটি নিয়ে আমি সম্প্রতি আমার এই সমস্যাটি পেয়েছি, এই মুহুর্তে আপনি সবচেয়ে ভাল যা করতে পারেন তা হল সর্বদা স্ক্রোলের অবস্থানটি একটি ভেরিয়েবলের মধ্যে রাখা এবং নির্বাচনের পরে স্থির উপাদানটির অবস্থান শীর্ষের সাথে স্থির পরিবর্তে স্থির করে তোলে নথির স্ক্রোল অবস্থানের ভিত্তিতে অবস্থান।

এটি তবে খুব কুরুচিপূর্ণ এবং এখনও সঠিক জায়গায় অবতরণ করার আগে কিছু অদ্ভুত পিছনে পিছনে স্ক্রোলিংয়ের ফলস্বরূপ, তবে এটি আমার কাছে পাওয়া সবচেয়ে কাছের।

অন্য কোনও সমাধান ব্রাউজারের ডিফল্ট স্ক্রোল মেকানিক্সকে ওভাররাইড করার সাথে জড়িত।

Question 8

এই বিশেষ বাগটি নিয়ে কাজ করেন নি, তবে সম্ভবত একটি ওভারফ্লো করা হয়েছে: লুকানো; শিরোনামে যখন পাঠ্য অঞ্চলটি দৃশ্যমান (বা কেবল সক্রিয়, আপনার নকশার উপর নির্ভর করে)। এতে ব্রাউজারটিকে অন্য কোথাও "ডাউন" না দেওয়ার প্রভাব ফেলতে পারে।

Question 9

একটি সম্ভাব্য সমাধান হ'ল ইনপুট ক্ষেত্রটি প্রতিস্থাপন করা।

একটি ডিভিডে ক্লিক ইভেন্টগুলি নিরীক্ষণ
কীবোর্ডটি রেন্ডার করতে একটি লুকানো ইনপুট ক্ষেত্র ফোকাস করুন
জাল ইনপুট ক্ষেত্রে লুকানো ইনপুট ক্ষেত্রের সামগ্রীটি প্রতিলিপি করুন

function focus() {
  $('#hiddeninput').focus();
}

$(document.body).load(focus);

$('.fakeinput').bind("click",function() {
    focus();
});

$("#hiddeninput").bind("keyup blur", function (){
  $('.fakeinput .placeholder').html(this.value);
});

#hiddeninput {
  position:fixed;
  top:0;left:-100vw;
  opacity:0;
  height:0px;
  width:0;
}
#hiddeninput:focus{
  outline:none;
}
.fakeinput {
  width:80vw;
  margin:15px auto;
  height:38px;
  border:1px solid #000;
  color:#000;
  font-size:18px;
  padding:12px 15px 10px;
  display:block;
  overflow:hidden;
}
.placeholder {
  opacity:0.6;
  vertical-align:middle;
}

<input type="text" id="hiddeninput"></input>

<div class="fakeinput">
    <span class="placeholder">First Name</span>
</div>

স্নিপেট প্রসারিত করুন

কোডপেন

Question 10

এইগুলির কোনও সমাধানই আমার পক্ষে কাজ করেনি কারণ আমার ডোম জটিল এবং আমার গতিশীল অসীম স্ক্রোল পৃষ্ঠা রয়েছে, তাই আমাকে নিজের তৈরি করতে হয়েছিল।

পটভূমি: আমি স্থির শিরোনাম এবং আরও নীচে এমন একটি উপাদান ব্যবহার করছি যা একবার ব্যবহারকারীর কাছ থেকে নীচে স্ক্রোল করে। এই উপাদানটির একটি অনুসন্ধান ইনপুট ক্ষেত্র রয়েছে। এছাড়াও, আমার সামনে এবং পিছনের দিকে স্ক্রোল চলাকালীন গতিশীল পৃষ্ঠা যুক্ত হয়েছে।

সমস্যা: আইওএস-এ, ব্যবহারকারী যে কোনও সময় স্থির উপাদানের ইনপুটটিতে ক্লিক করলে ব্রাউজারটি পৃষ্ঠার শীর্ষে সমস্ত দিকে স্ক্রোল করে। এটি কেবল অনাকাঙ্ক্ষিত আচরণের কারণেই নয়, এটি পৃষ্ঠার শীর্ষে আমার গতিশীল পৃষ্ঠা অ্যাডকে ট্রিগার করেছে।

প্রত্যাশিত সমাধান: ব্যবহারকারী যখন স্টিকি উপাদানটির ইনপুটটিতে ক্লিক করে তখন আইওএস-এ কোনও স্ক্রোল নেই (কিছুই নয়)।

সমাধান:

     /*Returns a function, that, as long as it continues to be invoked, will not
    be triggered. The function will be called after it stops being called for
    N milliseconds. If `immediate` is passed, trigger the function on the
    leading edge, instead of the trailing.*/
    function debounce(func, wait, immediate) {
        var timeout;
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

     function is_iOS() {
        var iDevices = [
          'iPad Simulator',
          'iPhone Simulator',
          'iPod Simulator',
          'iPad',
          'iPhone',
          'iPod'
        ];
        while (iDevices.length) {
            if (navigator.platform === iDevices.pop()) { return true; }
        }
        return false;
    }

    $(document).on("scrollstop", debounce(function () {
        //console.log("Stopped scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'absolute');
                $('#searchBarDiv').css('top', yScrollPos + 50 + 'px'); //50 for fixed header
            }
            else {
                $('#searchBarDiv').css('position', 'inherit');
            }
        }
    },250,true));

    $(document).on("scrollstart", debounce(function () {
        //console.log("Started scrolling!");
        if (is_iOS()) {
            var yScrollPos = $(document).scrollTop();
            if (yScrollPos > 200) { //200 here to offset my fixed header (50px) and top banner (150px)
                $('#searchBarDiv').css('position', 'fixed');
                $('#searchBarDiv').css('width', '100%');
                $('#searchBarDiv').css('top', '50px'); //50 for fixed header
            }
        }
    },250,true));

প্রয়োজনীয়তা: স্টার্টরল এবং স্টপস্ক্রোল ফাংশনগুলি কাজ করার জন্য জ্যাকিউরি মোবাইল প্রয়োজন।

আঠালো উপাদান দ্বারা নির্মিত যে কোনও ল্যাগ মসৃণ করতে ডেবিউন অন্তর্ভুক্ত।

আইওএস 10-তে পরীক্ষা করা হয়েছে।

Question 11

গতকাল আমি # এ এর উচ্চতা সর্বোচ্চ দৃশ্যমান উচ্চতায় (শরীরের উচ্চতা আমার ক্ষেত্রে ছিল) সেট করে গতকাল এ জাতীয় কোনও কিছুর উপরে গিয়েছিলাম যখন # বি দৃশ্যমান থাকে

প্রাক্তন:

    <script>
    document.querySelector('#b').addEventListener('focus', function () {
      document.querySelector('#a').style.height = document.body.clientHeight;
    })
    </script>

PS: দেরী উদাহরণের জন্য দুঃখিত, সবেমাত্র এটি প্রয়োজন ছিল লক্ষ্য।

Question 12

এটি এখন আইওএস 10.3 এ স্থির!

হ্যাকসের আর দরকার নেই।

Question 13

আমার কাছে সমস্যাটি ছিল, কোডের নীচে আমার জন্য এটি সমাধান হয়েছিল -

html{

 overflow: scroll; 
-webkit-overflow-scrolling: touch;

}