আইফোন / আইপ্যাডের জন্য জাভাস্ক্রিপ্ট স্ক্রোল ইভেন্ট?

107

আমি কোনও আইপ্যাডে স্ক্রোল ইভেন্টটি ক্যাপচার করব বলে মনে হচ্ছে না। এই কাজগুলির কোনওটাই নয়, আমি কী ভুল করছি?

window.onscroll=myFunction;

document.onscroll=myFunction;

window.attachEvent("scroll",myFunction,false);

document.attachEvent("scroll",myFunction,false);

তারা সবাই উইন্ডোজের সাফারি 3 তে কাজ করে। হাস্যকরভাবে, পিসিতে প্রতিটি ব্রাউজার সমর্থন করে window.onload=যদি আপনি বিদ্যমান ইভেন্টগুলি ক্লোবারিং করতে আপত্তি করেন না। তবে আইপ্যাডে যান না।

— ck_
সূত্র

146

onscrollআপনি যেভাবে আশা করতে পারেন তা বাদ দিয়ে iPhoneOS ইভেন্টগুলি ক্যাপচার করে ।

onscrollচিত্র -১-১-এ বর্ণিত পৃষ্ঠাটি চলন্ত এবং পুনরায় আঁকানো বন্ধ করলে একটি ইভেন্ট তৈরি হবে - ব্যবহারকারী আটকানো বন্ধ না করা পর্যন্ত এক আঙুলের প্যানিং কোনও ইভেন্ট তৈরি করে না ।

একইভাবে, onscrollআপনি স্ক্রোলিং বন্ধ করার পরে কেবল 2 টি আঙুলের আগুন দিয়ে স্ক্রোল করুন।

হ্যান্ডলারটি ইনস্টল করার স্বাভাবিক পদ্ধতি উদাহরণস্বরূপ

window.addEventListener('scroll', function() { alert("Scrolled"); });
// or
$(window).scroll(function() { alert("Scrolled"); });
// or
window.onscroll = function() { alert("Scrolled"); };
// etc

( Https://developer.apple.com/library/content/docamentation/ অ্যাপল অ্যাপ্লিকেশনস / রেফারেন্স / সাফারিওয়েব কনটেন্ট / হ্যান্ডলিংএভেণ্টস / হ্যান্ডলিংএভেন্টস. html দেখুন )

— kennytm
সূত্র

23

ধন্যবাদ, এটি আমাকে সমস্যার দিকে আরও তাকাতে বাধ্য করেছিল। আসল উত্তরটি ছিল আইফোন / আইপ্যাডে ভিউপোর্টের শীর্ষস্থানীয় সনাক্তকরণ কেবলমাত্র অন্য ব্রাউজার / হার্ডওয়্যার অস্তিত্বের সাথে কাজ করে window.pageYOffset না document.body.scrollTop||document.documentElement.scrollTop।

— ck_

6

আইপিএডে @ck_ দুর্ভাগ্যজনকভাবে window.pageYOffsetহ্রাসের পর্যায়ে আপডেট হয় না, তবে কেবল যখন স্ক্রোল শেষ হয়।

— আদপতবী

2

উইন্ডো.অনক্রলকে সরাসরি ওভাররাইট করা খারাপ অভ্যাস। ইভেন্ট শ্রোতাদের যুক্ত করা আরও ভাল। Window.addEventListener ('স্ক্রোল', ফাংশন () {সতর্কতা ('স্ক্রোলড!');}) ব্যবহার করুন;

— কেভিন ডাইস

4

এহম .. আসলে, উইন্ডো.অনস্রোকল এখন আইপ্যাডে সমস্ত সময় গুলি করছে, প্যান করার সময়, এবং প্যান করার পরে, হতাশার সময়। কিছু পরিবর্তন হয়েছে?

— কমনপাইক

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

— jiku

105

আইওএসের জন্য আপনার টাচমোভ ইভেন্টটি পাশাপাশি স্ক্রোল ইভেন্টটি ব্যবহার করতে হবে :

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() {
    //start of scroll event for iOS
}

function Scroll() {
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers
}

— জর্জ ফিলিপাকোস
সূত্র

37

এই ইভেন্টটি কেবল তখনই বরখাস্ত করা হয় যখন ব্যবহারকারী সক্রিয়ভাবে স্ক্রোল করে যখন গতিশীল স্ক্রোলিংয়ের ক্ষয় পর্বের সময় এটি চালিত হয় না।

— জন তিরসেন

আমি আইওএসের জন্য শেষ স্ক্রোল শনাক্তকরণ কোডটি অন্তর্ভুক্ত করার জন্য কোডটি পরিবর্তন করেছি

— জর্জ ফিলিপোকোস ২

আপনি "স্পর্শ" এর জন্য শ্রোতা যুক্ত করতেও পারেন যা ডেস্কটপে স্ক্রোলের অনুরূপ কাজ করবে।

— বিঞ্জবয়

1

নোট করুন যে এটি স্ক্রোল পর্যায়ে সময় অ্যাক্সেস সরবরাহ করে না

— বেন সেওয়ার্ডস

3

তিন বছর কেটে গেছে আমি হ্রাসের সময় স্ক্রোল অবস্থানের রিয়েলটাইম আপডেট পেতে পারি না। আমার মানচিত্রের মতো অ্যাপটি কীভাবে লিখব? ?????

— ফ্ল্যাভারস্কেপ

38

পুরানো পোস্টে অন্য উত্তর যুক্ত করার জন্য দুঃখিত তবে আমি সাধারণত এই কোডটি ব্যবহার করে খুব ভালভাবে একটি স্ক্রোল ইভেন্ট পাই (এটি কমপক্ষে 6.1-এ কাজ করে)

element.addEventListener('scroll', function() {
    console.log(this.scrollTop);
});

// This is the magic, this gives me "live" scroll events
element.addEventListener('gesturechange', function() {});

এবং এটা আমার জন্য কাজ করে। কেবল এটি যা করে না তা হ'ল স্ক্রোলটির হ্রাসের জন্য একটি স্ক্রোল ইভেন্ট দেয় (একবার হ্রাস শেষ হয়ে গেলে আপনি একটি চূড়ান্ত স্ক্রোল ইভেন্ট পান, এটির সাথে যা করবেন তাই করুন)) তবে আপনি যদি CSS এর মাধ্যমে জড়তা অক্ষম করে থাকেন তবে

-webkit-overflow-scrolling: none;

শরীরের জন্য আপনি নিজের উপাদানগুলিতে জড়তা পাবেন না যদিও আপনাকে ক্লাসিকটি করতে হতে পারে

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

— ডেভ ম্যাকিনটোস
সূত্র

7

একটি বৈধ উত্তরকে কেন নিম্নচ্যুত করুন এবং সমস্যাটির ব্যাখ্যা দিয়ে কোনও মন্তব্য করবেন না?

— ডেভ ম্যাকিনটোস

3

কারণ ডাউনভোটিং সহজ এবং দ্রুত। : /

— জেশান আহমেদ

5

এর লেখক অনুসারে একটি উত্তর সর্বদা "বৈধ" ... কোনও জেনেশুনে অবৈধ উত্তর পোস্ট করে না। তবে হ্যাঁ, তাদের কেন ব্যাখ্যা করা উচিত তা ব্যাখ্যা করা উচিত।

— ম্যাথিউ চার্বননিয়ার

3

gesturechangeইভেন্টগুলি

— মানহীন

6

আমি গতির স্ক্রোলিং এবং সবকিছু https://github.com/cubiq/iscrol এর অনুভূতি সহ iScrol এর সাহায্যে এই সমস্যার দুর্দান্ত সমাধান পেতে সক্ষম হয়েছি , এবং আমি বেশিরভাগই এটি অনুসরণ করেছি। আমার বাস্তবায়নের বিশদটি এখানে।

এইচটিএমএল: আমি আমার লিখিত সামগ্রীর স্ক্রোলযোগ্য অঞ্চলটি আইএসক্রোল ব্যবহার করতে পারে এমন কয়েকটি ডিভগুলিতে আবৃত করেছি:

<div id="wrapper">
  <div id="scroller">
    ... my scrollable content
  </div>
</div>

সিএসএস: আমি "স্পর্শ" এর জন্য মডার্নিজার ক্লাসটি কেবলমাত্র স্পর্শ ডিভাইসগুলিতে আমার শৈলীর পরিবর্তনের লক্ষ্যবস্তু করতে ব্যবহার করেছি (কারণ আমি কেবল স্পর্শে আইসক্রোল ইনস্ট্যান্টেশন করেছি)।

.touch #wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.touch #scroller {
  position: absolute;
  z-index: 1;
  width: 100%;
}

জেএস: আমি আইস্ক্রোল ডাউনলোড থেকে আইসক্রল-প্রোব.জেএস অন্তর্ভুক্ত করেছি এবং তারপরে নীচের মতো স্ক্রোলারটি সূচনা করেছি, যেখানে আপডেটপজিশন আমার ফাংশন যা নতুন স্ক্রোল অবস্থানের প্রতিক্রিয়া জানায়।

# coffeescript
if Modernizr.touch
  myScroller = new IScroll('#wrapper', probeType: 3)
  myScroller.on 'scroll', updatePosition
  myScroller.on 'scrollEnd', updatePosition

স্ক্রোল অফসেটটি না দেখে এখনই বর্তমান অবস্থানটি পেতে আপনাকে মাইস্ক্রোলার ব্যবহার করতে হবে। এখানে http://markdalgleish.com/preferencesations/embracingtouch/ (একটি সুপার সহায়ক নিবন্ধ, তবে এখন কিছুটা পুরানো ) থেকে নেওয়া একটি ফাংশন এখানে দেওয়া হয়েছে

function getScroll(elem, iscroll) {   
  var x, y;

  if (Modernizr.touch && iscroll) {
    x = iscroll.x * -1;
    y = iscroll.y * -1;   
  } else {
    x = elem.scrollTop;
    y = elem.scrollLeft;   
  }

  return {x: x, y: y}; 
}

কেবলমাত্র অন্য গোটাচা মাঝে মধ্যেই আমার পৃষ্ঠার যে অংশটিতে আমি স্ক্রোল করার চেষ্টা করছিলাম সেটি হারিয়ে ফেলতাম এবং এটি স্ক্রোল করতে অস্বীকার করবে। যখনই আমি # র‍্যাপারের বিষয়বস্তুগুলি পরিবর্তন করেছি এবং আমার সমস্যার সমাধান করেছে তখনই আমার মাইক্রোলেলআরফ্রেশ () এ কিছু কল যুক্ত করতে হয়েছিল।

সম্পাদনা: অন্য গোটাচা হ'ল আইস্ক্রোল সমস্ত "ক্লিক" ইভেন্ট খায়। আমি আইস্ক্রোলটি একটি "ট্যাপ" ইভেন্ট প্রেরণ করার বিকল্পটি চালু করেছি এবং "ক্লিক" ইভেন্টগুলির পরিবর্তে সেগুলি পরিচালনা করেছি। সৌভাগ্যক্রমে স্ক্রোল এরিয়ায় আমার বেশি ক্লিক করার দরকার ছিল না, সুতরাং এটি কোনও বড় কথা ছিল না।

— মেলিন্ডা ওয়েথার্স
সূত্র

1

আইওএস 8 বেরিয়ে আসার পরে, এই সমস্যাটির আর কোনও অস্তিত্ব নেই। স্ক্রোল ইভেন্টটি এখন আইওএস সাফারিতেও সহজেই ফায়ার করা হয়েছে।

সুতরাং, আপনি যদি scrollইভেন্ট হ্যান্ডলারটি নিবন্ধভুক্ত করেন এবং সেই ইভেন্ট হ্যান্ডলারের window.pageYOffsetভিতরে যাচাই করেন , সবকিছু ঠিকঠাক কাজ করে।

— মাথিয়াস বোহলেন
সূত্র

1

কর্ডোভা ব্যবহারের মতো কিছু ব্যবহারের ক্ষেত্রে এটি এখনও বিদ্যমান। বিকাশকারী.টেলিক.

— com

6

আমার অভিজ্ঞতা হ'ল 2019 এ এটি এখনও বর্তমান আইওএস ডিভাইসগুলির জন্য একটি সমস্যা হিসাবে রয়ে গেছে

— ক্রিস