আইপ্যাড সাফারি: স্ক্রোলিং অক্ষম করুন, এবং বাউন্স এফেক্ট?

Question

আমি ব্রাউজার ভিত্তিক অ্যাপটিতে কাজ করছি, বর্তমানে আমি আইপ্যাড সাফারি ব্রাউজারটি বিকাশ করছি এবং স্টাইল করছি।

আমি আইপ্যাডে দুটি জিনিস খুঁজছি: যে পৃষ্ঠাগুলির প্রয়োজন হয় না তার জন্য আমি উলম্ব স্ক্রোলিং কীভাবে অক্ষম করতে পারি? এবং আমি কীভাবে স্থিতিস্থাপক বাউন্স প্রভাবকে অক্ষম করতে পারি?

Comments

নিম্নলিখিত উত্তর একমাত্র আমার জন্য কাজ এবং (বর্তমান পড়ুন stackoverflow.com/a/51176339/1979180 )

— frage

Answer 1

আপনি যদি খুব পুরানো আইওএস ডিভাইসের জন্য বিকাশ না করেন তবে এই উত্তরটি আর প্রযোজ্য নয় ... দয়া করে অন্যান্য সমাধান দেখুন

---

২০১১ এর উত্তর: আইওএস সাফারির ভিতরে চলমান একটি ওয়েব / এইচটিএমএল অ্যাপ্লিকেশনটির জন্য আপনি এরকম কিছু চান

document.ontouchmove = function(event){
    event.preventDefault();
}

আইওএস 5 এর জন্য আপনি নিম্নলিখিতগুলি অ্যাকাউন্টে নিতে পারেন: ডকুমেন্ট.অনুচমোভ এবং আইওএস 5 এ স্ক্রোলিং

সেপ্টেম্বর 2014 আপডেট করুন: আরও পুঙ্খানুপুঙ্খ দৃষ্টিভঙ্গি এখানে পাওয়া যাবে: https://github.com/luster-io/prevent-overscrol । তার জন্য এবং দরকারী ওয়েব অ্যাপ্লিকেশন সামগ্রিক পরামর্শের জন্য, http://www.luster.io/blog/9-29-14-momot-web-checklist.html দেখুন

মার্চ ২০১ Update আপডেট করুন: শেষ লিঙ্কটি আর সক্রিয় নেই - https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-momot-web-checklist দেখুন পরিবর্তে সংরক্ষণাগারভুক্ত সংস্করণের জন্য .html । এটি নির্দেশ করার জন্য @ ফালসারেল্লাকে ধন্যবাদ।

Comments

আইওএস সাফারির ভিতরে আমার ওয়েবপ্যাপ রয়েছে এবং আমি অনটچমভ ইভেন্টটি অক্ষম করার চেষ্টা করেছি তবে সাবধানতার সাথে যদি করা হয় তবে বাউন্স প্রভাবটি এখনও পাওয়া সম্ভব। (আইওএস 5)

— নীলেশ

শুধু বাউন্স এফেক্টটি অক্ষম করার বিষয়ে কী ...?

— যুবাল এ।

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

— হিউসফোরালাইস

এখানে প্রচুর লোকেরা এটি ব্যবহার করার সময় ডিভল স্ক্রোলিং সম্পর্কে জিজ্ঞাসা করছে those এই ডিভগুলিকে স্ক্রোলযোগ্য করতে যোগ করুন onTouchMove: function(e) { e.stopPropagation(); e.stopImmediatePropagation(); } এটি ঘটনাকে শরীরে আঘাত করা থেকে বিরত রাখবে, তবে দেহ অ-উচ্ছল থাকবে। সম্পাদনা: এটি ধরে নিয়েছে যে আপনি set ('ডিভ') সেট করেছেন। ('টাচমোভ', ... অন টাচমভ);

— ম্যাট কেনেফিক

@ অস্কার অস্টেগার্ড সর্বশেষ লিঙ্কটি আমার পক্ষে কাজ করে নি তবে আমি ওয়েব আর্কাইভটিতে

— লিখিত

Answer 2

আপনি শরীরের অবস্থান / এইচটিএমএল স্থির করেও পরিবর্তন করতে পারেন:

body,
html {
  position: fixed;
}

Comments

এটি আসলে আইপ্যাড আইওএস 8.2 সাফারিতে খুব ভাল কাজ করেছে; আর কোনও বাউন্স প্রভাব নেই।

— আকসেলি পালান

আমি এখন পর্যন্ত দেখেছি এটি করার সর্বোত্তম উপায়

— hildende

আপনি অবস্থানের সাথে কিছু রাখতে চাইলে কাজ করে না: পরম এবং সমস্ত পক্ষ 0 তে সেট করে (একটি পূর্ণস্ক্রিন ডিভ করতে) - আপনার পুরো দস্তাবেজটি কিছুই সঙ্কুচিত করে।

— রিভ

পৃষ্ঠাটি আমার জন্য পৃষ্ঠার শীর্ষে ফিরে আসে যখন আমি এটি ব্যবহার করি এবং তারপরে আমি একটি ইনপুটটিতে ফোকাস করি। আপনি কি এই কাছাকাছি উপায় জানেন?

— জুলি

@riv প্রস্থ যুক্ত: 100%; উচ্চতা: 100% শরীর এবং এইচটিএমএল উভয়ই আমাকে সহায়তা করেছিল।

— টিম

Answer 3

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

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault);
}

Comments

ছাড়া { passive: false }এটি অবশ্যই কাজ করছে না !!! Stackoverflow শহরবাসী উপর স্বাগতম

— সংস্করণ

আমি এই সমাধান প্রদানের জন্য আপনাকে প্রশংসা করি!

— পল জেড।

এটা সঠিক উত্তর. আপনি এখানে ব্যাখ্যাটি দেখতে পারেন: ডিভেলপার.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / ইভেন্ট ট্র্যাজেট / ক্রমের পরে 54৪ টা টাচমোভ ডিফল্ট প্যাসিভকে সত্য রূপান্তরিত করে যার অর্থ ডিফল্ট কলগুলি উপেক্ষা করা হবে। এজন্য আপনাকে অবশ্যই {প্যাসিভ: ভুয়া pass পাস করতে হবে, সুতরাং প্রতিরোধক ডিফল্ট কল উপেক্ষা করা হবে না।

— ডারিকিতো

আপনি জেএসে ফাংশনটি ঘোষণা করছেন - তবে আপনি এই ফাংশনটিকে কোনও উপাদানটিতে কীভাবে কল করবেন যাতে এটি প্রস্তাবিত হিসাবে কাজ করে?

— ikwyl6

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

— কলসাল

Answer 4

আপনি এটি করতে এই jQuery কোড স্নিপেট ব্যবহার করতে পারেন:

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

এটি উল্লম্ব স্ক্রোলিং এবং আপনার পৃষ্ঠাগুলিতে যে কোনও বাউন্স ব্যাক এফেক্ট প্রভাবিত করবে block

Comments

এটি জাভাস্ক্রিপ্ট নয়, এটি jQuery। আপনার উল্লেখ করা উচিত, সবাই যে কাঠামোটি ব্যবহার করছে না।

— ইটা

আমি কীভাবে অনুভূমিক বাউন্স বা স্ক্রোল বন্ধ করতে পারি

— ফিদেল কাস্ত্রো

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

— আলেসান্দ্রো ইনকারাতি

@ চিনা এটি বলা জাভাস্ক্রিপ্ট মাত্র। এটি খাঁটি জাভাস্ক্রিপ্ট নয়।

— বেন লরান্টেফাই

Answer 5

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

ধারক উপর আপনি উপাদান ভিতরে বাউন্স প্রভাব সেট করতে পারেন

সূত্র: http://www.kylejlaron.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Comments

একসাথে সঙ্গে overflow:hiddenউপর <body>, এই এখনও সবচেয়ে ভালো সমাধান নয়। তবে কীবোর্ডটি খোলার সময় বা স্ক্রিনের নীচে স্লাইড করার সময়, এটি আর কাজ করবে না।

— ফ্যাবিয়ান ভন এলার্টস

ইনপুট অনফোকাস ওভারফ্লো অপসারণ করার চেষ্টা করুন

— ব্যবহারকারী 95658415

Answer 6

আমি জানি এটি সামান্য অফ-পিস্ট তবে আমি ফ্ল্যাশকে একটি ইন্টারেক্টিভ এইচটিএমএল 5 গেমে রূপান্তর করতে ব্যবহার করেছি এবং একই স্ক্রোলিংয়ের সমস্যাটি পেয়েছি তবে কার্যকর সমাধান হয়নি।

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

যদি আমি একই ইভেন্টটি সুইফি ধারকটিতে যুক্ত করার চেষ্টা করি তবে মঞ্চটি লোড হওয়ার সাথে সাথে এটি প্রতিস্থাপন করা হয়েছিল।

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

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

var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}

Comments

এটি আইপ্যাডে পুরো স্ক্রোলটি অক্ষম করে

— ফিদেল কাস্ত্রো

Answer 7

আইপ্যাড সাফারি অপসারণের জন্য কোড: স্ক্রোলিং অক্ষম করুন, এবং বাউন্স প্রভাব করুন

   document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, { passive: false });

ডকুমেন্টের ভিতরে আপনার যদি ক্যানভাস ট্যাগ থাকে তবে কিছু সময় এটি ক্যানভাসের অভ্যন্তরের অবজেক্টের ব্যবহারযোগ্যতাকে প্রভাবিত করবে (উদাহরণ: বস্তুর চলন); সুতরাং এটি ঠিক করার জন্য কোডের নীচে যুক্ত করুন।

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });

Answer 8

এই জেএস একাকীকরণ চেষ্টা করুন :

var xStart, yStart = 0; 

document.addEventListener('touchstart', function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
}); 

document.addEventListener('touchmove', function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

আপনার স্পর্শ ইভেন্ট শ্রোতাদের বিযুক্ত না করে ডিফল্ট সাফারি স্ক্রোলিং এবং বাউন্স অঙ্গভঙ্গি প্রতিরোধ করে।

Comments

এটি ওয়েব অ্যাপটিকে পুরোপুরি শরীরের উপাদানগুলিতে স্ক্রোল করা থেকে বিরত করে।

— মার্টিজনিক

Answer 9

সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করে না। এইভাবেই আমি এটি করি।

  html,body {
      position: fixed;
      overflow: hidden;
    }
  .the_element_that_you_want_to_have_scrolling{
      -webkit-overflow-scrolling: touch;
  }

Comments

আমি করতাম }

— রায় সেগল

আপনার উত্তরটি আমার জন্য এইচটিএমএল, বডি জন্য কাজ করেছে তবে আমি স্ক্রোল করতে "the_element_that_you_ਵੰਤ_ টো_ভেন_স্ক্রোলিং" পেতে পারি না। এই উপাদানটি শরীরের অধীনে থাকা কয়েকটি ডিভের ভিতরে বাসা বাঁধে। এই নেস্টেড ডিভের জন্য যে কোনও সাধারণ উপাদানগুলির ট্যাগগুলির মধ্যে আমার কী এটি স্ক্রোলটি থাকতে চান তা কী বিবেচনা করে? আমার অবস্থান: আপেক্ষিক

— ikwyl6

Answer 10

আইফোনে পরীক্ষিত। কেবলমাত্র এই সিএসএসকে টার্গেট এলিমেন্ট পাত্রে ব্যবহার করুন এবং এটি স্ক্রোলিং আচরণ পরিবর্তন করবে, যা আঙুলটি স্ক্রীন ছেড়ে গেলে থামবে।

-webkit-overflow-scrolling: auto

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Answer 11

যারা মাইস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশন ব্যবহার করছেন এবং আসলে লেখার পরিবর্তে বডি স্ক্রোলিং / টেনে আনার জন্য লড়াই করছেন (আইপ্যাড এবং ট্যাবলেটগুলিতে):

<body touch-action="none" unresolved>

এটা আমার জন্য এটি স্থির।

Answer 12

আপনি স্ক্রোল প্রতিরোধের জন্য জেএস ব্যবহার করতে পারেন:

let body = document.body;

let hideScroll = function(e) {
  e.preventDefault();
};

function toggleScroll (bool) {

  if (bool === true) {
    body.addEventListener("touchmove", hideScroll);
  } else {
    body.removeEventListener("touchmove", hideScroll);
  }
}

toggleScrollআপনি যখন মোডেনটি খুলেন / বন্ধ করেন তখন কেবল চালানো / বন্ধ স্ট্যাঙ্কের চেয়ে ।

এটার মত toggleScroll(true) / toggleScroll(false)

(এটি কেবল আইওএসের জন্য, অ্যান্ড্রয়েডে কাজ করছে না)

Answer 13

শৈল্যে টোগল করে এমন এই জেএস সমাধানটি চেষ্টা করুন webkitOverflowScrolling। এখানে কৌশলটি এই স্টাইলটি বন্ধ, মোবাইল সাফারি সাধারণ স্ক্রোলিংয়ে যায় এবং ওভার-বাউন্স প্রতিরোধ করে - হায়, এটি চলমান টানাকে বাতিল করতে সক্ষম হয় না। এই জটিল সমাধানটি onscrollশীর্ষে বাউন্স হিসাবে scrollTopট্র্যাক হতে পারে এমন নেতিবাচক করে তোলে । এই সমাধানটি আইওএস 12.1.1 এ পরীক্ষা করা হয়েছিল এবং এতে একক ঘাটতি রয়েছে: স্ক্রোলটি ত্বরান্বিত করার সময় একক ওভার বাউন্সটি ত্বরান্বিত করার পরে এখনও ঘটে কারণ স্টাইলটি পুনরায় সেট করা তা অবিলম্বে এটি বাতিল করতে পারে না।

function preventScrollVerticalBounceEffect(container) {
  setTouchScroll(true) //!: enable before the first scroll attempt

  container.addEventListener("touchstart", onTouchStart)
  container.addEventListener("touchmove", onTouch, { passive: false })
  container.addEventListener("touchend", onTouchEnd)
  container.addEventListener("scroll", onScroll)

  function isTouchScroll() {
    return !!container.style.webkitOverflowScrolling
  }

  let prevScrollTop = 0, prevTouchY, opid = 0

  function setTouchScroll(on) {
    container.style.webkitOverflowScrolling = on ? "touch" : null

    //Hint: auto-enabling after a small pause makes the start
    // smoothly accelerated as required. After the pause the
    // scroll position is settled, and there is no delta to
    // make over-bounce by dragging the finger. But still,
    // accelerated content makes short single over-bounce
    // as acceleration may not be off instantly.

    const xopid = ++opid
    !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

    if(!on && container.scrollTop < 16)
      container.scrollTop = 0
    prevScrollTop = container.scrollTop
  }

  function isBounceOverTop() {
    const dY = container.scrollTop - prevScrollTop
    return dY < 0 && container.scrollTop < 16
  }

  function isBounceOverBottom(touchY) {
    const dY = touchY - prevTouchY

    //Hint: trying to bounce over the bottom, the finger moves
    // up the screen, thus Y becomes smaller. We prevent this.

    return dY < 0 && container.scrollHeight - 16 <=
      container.scrollTop + container.offsetHeight
  }

  function onTouchStart(e) {
    prevTouchY = e.touches[0].pageY
  }

  function onTouch(e) {
    const touchY = e.touches[0].pageY

    if(isBounceOverBottom(touchY)) {
      if(isTouchScroll())
        setTouchScroll(false)
      e.preventDefault()
    }

    prevTouchY = touchY
  }

  function onTouchEnd() {
    prevTouchY = undefined
  }

  function onScroll() {
    if(isTouchScroll() && isBounceOverTop()) {
      setTouchScroll(false)
    }
  }
}

Answer 14

উন্নত উত্তর @ বেন বোস এবং @ টিম দ্বারা মন্তব্য করেছে

এই সিএসএস সিএসএস পুনরায় রেন্ডার দিয়ে স্ক্রোলিং এবং পারফরম্যান্স সমস্যা রোধ করতে সহায়তা করবে কারণ প্রস্থ এবং উচ্চতা ছাড়াই অবস্থান পরিবর্তন / সামান্য পিছিয়ে পড়েছে

body,
html {
  position: fixed;
  width: 100%; 
  height: 100%
}

Comments

আইওএস 13-এ, এটি আমার পক্ষে সবচেয়ে পরিষ্কার সমাধান এবং এখনও কোনও ত্রুটি খুঁজে পাওয়া যায় নি ...

— সোইলেন্ট গ্রাহাম

Answer 15

আপনারা যারা বাউন্সিং থেকে মুক্তি পেতে চান না তবে কখন বন্ধ হয়ে যায় তা জানতে (উদাহরণস্বরূপ স্ক্রিন দূরত্বের কিছু গণনা শুরু করতে), আপনি নিম্নলিখিতটি করতে পারেন (ধারকটি উপচে পড়া ধারক উপাদান):

    const isBouncing = this.container.scrollTop < 0 ||
    this.container.scrollTop + this.container.offsetHeight >
        this.container.scrollHeight

Answer 16

সাফারি বাউন্স স্ক্রোলিং প্রভাবটি অক্ষম করুন:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: fixed;
}  

Answer 17

রাগান্বিত কিউইয়ের মতোই আমি পজিশনের চেয়ে উচ্চতা ব্যবহার করে কাজ করতে পেরেছি:

html,body {
  height: 100%;
  overflow: hidden;
}

.the_element_that_you_want_to_have_scrolling{
  -webkit-overflow-scrolling: touch;
}

Comments

ডক হিসাবে এটি

— বাউন্সকে

@ কাসুআল আপনার নিশ্চিত অর্থ কী? এই সমাধানটি আমার ব্যবহারের ক্ষেত্রে কাজ করেছে ...

— অস্টিনহ 7

Answer 18

সমাধান পরীক্ষা করা হয়েছে, আইওএস 12.x এ কাজ করে

এই সমস্যাটি আমার মুখোমুখি হয়েছিল:

<body> <!-- the whole body can be scroll vertically -->
  <article>

    <my_gallery> <!-- some picture gallery, can be scroll horizontally -->
    </my_gallery>

  </article>
</body>

আমি আমার গ্যালারী স্ক্রোল করার সময়, শরীর সর্বদা নিজেকে স্ক্রোল করে (মানব সোয়াইপগুলি আসলে অনুভূমিক নয়), যা আমার গ্যালারীটিকে অকেজো করে তোলে।

আমার গ্যালারী স্ক্রোলিং শুরু করার সময় আমি যা করেছি তা এখানে

var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari

এবং যখন আমার গ্যালারীটি এর স্ক্রোলিং শেষ করবে ...

var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}

আশা করি এটি সহায়তা করবে ~