আইওএস সাফারি - কীভাবে ওভারসক্রোল অক্ষম করা যায় তবে স্ক্রোলযোগ্য ডিভগুলি সাধারণত স্ক্রোল করার অনুমতি দেয়?

Question 1

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

document.body.addEventListener('touchmove',function(e){
      e.preventDefault();
  });

এটি ওভারসক্রোল অক্ষম করতে দুর্দান্ত কাজ করে তবে আমার অ্যাপ্লিকেশনটিতে বেশ কয়েকটি স্ক্রোলযোগ্য ডিভ রয়েছে এবং উপরের কোডটি তাদের স্ক্রোলিং থেকে রোধ করে ।

আমি কেবল আইওএস 5 এবং তারপরের উপরে লক্ষ্যবস্তু করছি তাই আমি আইস্ক্রোলের মতো হ্যাকি সমাধানগুলি এড়িয়ে চলেছি। পরিবর্তে আমি আমার স্ক্রোলযোগ্য ডিভ জন্য এই সিএসএস ব্যবহার করছি:

.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y:auto;
}

এটি দস্তাবেজ ওভারস্ক্রোল স্ক্রিপ্ট ব্যতীত কাজ করে তবে ডিভ স্ক্রোলিং সমস্যার সমাধান করে না।

জিকুয়েরি প্লাগইন ব্যতীত ওভারসক্রোল ফিক্সটি ব্যবহার করার ছাড়াও আমার $ ('।' স্ক্রোলযোগ্য ') ডিভগুলি ছাড় দেওয়া কি কোনও উপায় আছে?

সম্পাদনা:

আমি এমন কিছু খুঁজে পেয়েছি যা একটি শালীন সমাধান:

 // Disable overscroll / viewport moving on everything but scrollable divs
 $('body').on('touchmove', function (e) {
         if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
 });

আপনি ডিভের শুরু বা শেষের দিকে স্ক্রোল করলে ভিউপোর্টটি এখনও সরে যায়। আমি এটি নিষ্ক্রিয় করার একটি উপায়ও খুঁজতে চাই।

Question 2

আপনি ডিভের শুরু বা শেষের দিকে স্ক্রোল করলে এটি সমস্যার সমাধান করে

var selScrollable = '.scrollable';
// Uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});
// Uses body because jQuery on events are called off of the element they are
// added to, so bubbling would not work if we used document instead.
$('body').on('touchstart', selScrollable, function(e) {
  if (e.currentTarget.scrollTop === 0) {
    e.currentTarget.scrollTop = 1;
  } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
    e.currentTarget.scrollTop -= 1;
  }
});
// Stops preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove', selScrollable, function(e) {
  e.stopPropagation();
});

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

$('body').on('touchmove', selScrollable, function(e) {
    // Only block default if internal div contents are large enough to scroll
    // Warning: scrollHeight support is not universal. (https://stackoverflow.com/a/15033226/40352)
    if($(this)[0].scrollHeight > $(this).innerHeight()) {
        e.stopPropagation();
    }
});

Question 3

টাইলার ডজের দুর্দান্ত উত্তরটি ব্যবহার করে আমার আইপ্যাড পিছিয়ে ছিল, তাই আমি কিছু থ্রোটলিং কোড যুক্ত করেছি, এখন এটি বেশ মসৃণ। কিছু সময় স্ক্রল করার সময় কিছুটা ন্যূনতম এড়িয়ে যাওয়া হয়।

// Uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});

var scrolling = false;

// Uses body because jquery on events are called off of the element they are
// added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {

    // Only execute the below code once at a time
    if (!scrolling) {
        scrolling = true;   
        if (e.currentTarget.scrollTop === 0) {
          e.currentTarget.scrollTop = 1;
        } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
          e.currentTarget.scrollTop -= 1;
        }
        scrolling = false;
    }
});

// Prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
  e.stopPropagation();
});

এছাড়াও, নিম্নলিখিত সিএসএস যুক্ত করে কিছু রেন্ডারিং গ্লিটস ( উত্স ) সংশোধন করে :

.scrollable {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.scrollable * {
    -webkit-transform: translate3d(0,0,0);
}

Question 4

প্রথমে যথারীতি আপনার পুরো দস্তাবেজে ডিফল্ট ক্রিয়াগুলি প্রতিরোধ করুন:

$(document).bind('touchmove', function(e){
  e.preventDefault();           
});

তারপরে আপনার শ্রেণীর উপাদানগুলির দলিলটি দস্তাবেজ স্তরে প্রচার থেকে বিরত করুন। এটি এটি উপরে ফাংশনে পৌঁছানো থেকে বিরত রাখে এবং এভাবে e.preventDefault () আরম্ভ করা হয় না:

$('.scrollable').bind('touchmove', function(e){
  e.stopPropagation();
});

এই ব্যবস্থাটি সমস্ত স্পর্শচক্রের ক্লাস গণনা করার চেয়ে আরও প্রাকৃতিক এবং কম নিবিড় বলে মনে হয়। গতিশীল উত্পাদিত উপাদানগুলির জন্য .bind () পরিবর্তে .on () ব্যবহার করুন।

আপনার স্ক্রোলযোগ্য ডিভিশন ব্যবহার করার সময় দুর্ভাগ্যজনক ঘটনাগুলি ঘটতে রোধ করতে এই মেটা ট্যাগগুলিও বিবেচনা করুন:

<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

Question 5

প্রশ্নে লক্ষ্যযুক্ত উপাদানটি যে আপনি স্ক্রোল করতে চান তা নিশ্চিত করার জন্য আপনি কী আপনার ওভারসক্রোল অক্ষমকরণ কোডটিতে আরও কিছু যুক্তি যুক্ত করতে পারেন? এটার মতো কিছু:

document.body.addEventListener('touchmove',function(e){
     if(!$(e.target).hasClass("scrollable")) {
       e.preventDefault();
     }
 });

Question 6

এটির সর্বোত্তম সমাধান হ'ল CSS / এইচটিএমএল: আপনার উপাদানগুলি ইতিমধ্যে না জড়ানোর জন্য একটি ডিভ তৈরি করুন এবং এটি স্থির এবং ওভারফ্লো লুকানো অবস্থানে সেট করুন set Ptionচ্ছিক, উচ্চ স্ক্রিন এবং প্রস্থটি 100% এ সেট করুন যদি আপনি এটি চান পুরো স্ক্রিনটি এবং পুরো স্ক্রীন ব্যতীত অন্য কিছুই পূরণ করতে চান

#wrapper{
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
}

<div id="wrapper">
  <p>All</p>
  <p>Your</p>
  <p>Elements</p>
</div>

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

Question 7

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

var touchStartEvent;
$('.scrollable').on({
    touchstart: function(e) {
        touchStartEvent = e;
    },
    touchmove: function(e) {
        if ((e.originalEvent.pageY > touchStartEvent.originalEvent.pageY && this.scrollTop == 0) ||
            (e.originalEvent.pageY < touchStartEvent.originalEvent.pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight))
            e.preventDefault();
    }
});

Question 8

আমি যখন সমস্ত স্ক্রোলযোগ্য অঞ্চল (একটি "শপিং কার্ট" পপডাউন যার সাথে আপনার কার্টের স্ক্রোলযোগ্য দর্শন আছে) পপআপ থাকবে তখন আমি সমস্ত দেহ স্ক্রোলিং প্রতিরোধের একটি উপায় সন্ধান করছিলাম।

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

যখন ডেস্কটপ ব্রাউজারগুলি ওভারফ্লো পর্যবেক্ষণ করে: লুকানো - আইওএস এটিকে উপেক্ষা করবে বলে মনে হয় আপনি যদি অবস্থানটি স্থির করে না দেন ... যার ফলে পুরো পৃষ্ঠাটি একটি অদ্ভুত প্রস্থ হয়ে যায়, সুতরাং আপনাকে অবস্থান এবং প্রস্থ নিজেই সেট করতে হবে। এই সিএসএস ব্যবহার করুন:

.noscroll {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

এবং এই jquery:

/* fade in/out cart popup, add/remove .noscroll from body */
$('a.cart').click(function() {
    $('nav > ul.cart').fadeToggle(100, 'linear');
    if ($('nav > ul.cart').is(":visible")) {
        $('body').toggleClass('noscroll');
    } else {
        $('body').removeClass('noscroll');
    }
});

/* close all popup menus when you click the page... */
$('body').click(function () {
    $('nav > ul').fadeOut(100, 'linear');
    $('body').removeClass('noscroll');
});

/* ... but prevent clicks in the popup from closing the popup */
$('nav > ul').click(function(event){
    event.stopPropagation();
});

Question 9

আমি jquery ছাড়াই একটু workarround কাজ করেছি। পারফের্ট নয় তবে দুর্দান্ত কাজ করে (বিশেষত যদি আপনার কোনও স্কল-ওয়াইতে স্ক্রোল-এক্স থাকে) https://github.com/pinadesign/overscrol/

এতে অংশ নিতে এবং উন্নতি করতে নিখরচায়

Question 10

এই সমাধানটির জন্য আপনার সমস্ত স্ক্রোলযোগ্য ডিভগুলিতে স্ক্রোলযোগ্য ক্লাস লাগানোর দরকার নেই তাই সাধারণ। INPUT উপাদানগুলি সন্তুষ্টির পরিমাণ এবং ওভারফ্লো স্ক্রোল বা অটোসের যে সমস্ত উপাদান বা বাচ্চাদের, সেগুলিতে স্ক্রোলিং অনুমোদিত।

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

$.expr[':'].scrollable = function(obj) {
    var $el = $(obj);
    var tagName = $el.prop("tagName");
    return (tagName !== 'BODY' && tagName !== 'HTML') && (tagName === 'INPUT' || $el.is("[contentEditable='true']") || $el.css("overflow").match(/auto|scroll/));
};
function preventBodyScroll() {
    function isScrollAllowed($target) {
        if ($target.data("isScrollAllowed") !== undefined) {
            return $target.data("isScrollAllowed");
        }
        var scrollAllowed = $target.closest(":scrollable").length > 0;
        $target.data("isScrollAllowed",scrollAllowed);
        return scrollAllowed;
    }
    $('body').bind('touchmove', function (ev) {
        if (!isScrollAllowed($(ev.target))) {
            ev.preventDefault();
        }
    });
}

Question 11

সমস্ত "টাচমুভ" ইভেন্টগুলি অক্ষম করার সময় একটি ভাল ধারণা বলে মনে হতে পারে, যত তাড়াতাড়ি আপনার পৃষ্ঠাতে অন্যান্য স্ক্রোলযোগ্য উপাদানগুলির প্রয়োজন হবে এটি সমস্যা তৈরি করবে। সর্বোপরি, আপনি যদি নির্দিষ্ট উপাদানগুলিতে কেবলমাত্র "টাচমুভ" ইভেন্টগুলি অক্ষম করেন (যেমন পৃষ্ঠাটি আপনি যদি পৃষ্ঠাটি স্ক্রোলযোগ্য না করে চান) তবে যত তাড়াতাড়ি এটি অন্য কোথাও সক্ষম করা হবে, ইউআরএল থাকাকালীন আইওএস ক্রোমে থামাতে না পারা যায় বার টগলস।

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

function disableDocumentScrolling() {
    if (document.documentElement.style.position != 'fixed') {
        // Get the top vertical offset.
        var topVerticalOffset = (typeof window.pageYOffset != 'undefined') ?
            window.pageYOffset : (document.documentElement.scrollTop ? 
            document.documentElement.scrollTop : 0);
        // Set the document to fixed position (this is the only way around IOS' overscroll "feature").
        document.documentElement.style.position = 'fixed';
        // Set back the offset position by user negative margin on the fixed document.
        document.documentElement.style.marginTop = '-' + topVerticalOffset + 'px';
    }
}

function enableDocumentScrolling() {
    if (document.documentElement.style.position == 'fixed') {
        // Remove the fixed position on the document.
        document.documentElement.style.position = null;
        // Calculate back the original position of the non-fixed document.
        var scrollPosition = -1 * parseFloat(document.documentElement.style.marginTop);
        // Remove fixed document negative margin.
        document.documentElement.style.marginTop = null;
        // Scroll to the original position of the non-fixed document.
        window.scrollTo(0, scrollPosition);
    }
}

এই সমাধানটি ব্যবহার করে আপনার একটি স্থির দলিল থাকতে পারে এবং আপনার পৃষ্ঠায় থাকা অন্য কোনও উপাদান সাধারণ সিএসএস (উদাঃ overflow: scroll;) ব্যবহার করে উপচে পড়তে পারে । বিশেষ ক্লাস বা অন্য কিছুর দরকার নেই।

Question 12

এখানে একটি জেপ্টো সামঞ্জস্যপূর্ণ সমাধান

    if (!$(e.target).hasClass('scrollable') && !$(e.target).closest('.scrollable').length > 0) {
       console.log('prevented scroll');
       e.preventDefault();
       window.scroll(0,0);
       return false;
    }

Question 13

এটি আমার জন্য কাজ করে (প্লেইন জাভাস্ক্রিপ্ট)

var fixScroll = function (className, border) {  // className = class of scrollElement(s), border: borderTop + borderBottom, due to offsetHeight
var reg = new RegExp(className,"i"); var off = +border + 1;
function _testClass(e) { var o = e.target; while (!reg.test(o.className)) if (!o || o==document) return false; else o = o.parentNode; return o;}
document.ontouchmove  = function(e) { var o = _testClass(e); if (o) { e.stopPropagation(); if (o.scrollTop == 0) { o.scrollTop += 1; e.preventDefault();}}}
document.ontouchstart = function(e) { var o = _testClass(e); if (o && o.scrollHeight >= o.scrollTop + o.offsetHeight - off) o.scrollTop -= off;}
}

fixScroll("fixscroll",2); // assuming I have a 1px border in my DIV

এইচটিএমএল:

<div class="fixscroll" style="border:1px gray solid">content</div>

Question 14

এটি চেষ্টা করুন এটি নিখুঁত কাজ করবে।

$('body.overflow-hidden').delegate('#skrollr-body','touchmove',function(e){
    e.preventDefault();
    console.log('Stop skrollrbody');
}).delegate('.mfp-auto-cursor .mfp-content','touchmove',function(e){
    e.stopPropagation();
    console.log('Scroll scroll');
});

Question 15

আমি সহজ সঙ্গে বিস্ময়কর ভাগ্য ছিল:

body {
    height: 100vh;
}

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