ওয়েব পৃষ্ঠার "ওভারসক্রোলিং" প্রতিরোধ করুন

Question

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

আমি লক্ষ্য করেছি যে কিছু পৃষ্ঠাগুলি এটি অক্ষম করেছে, যেমন জিমেইল এবং "নতুন ট্যাব" পৃষ্ঠা।

আমি কীভাবে "ওভারস্ক্রোলিং" অক্ষম করতে পারি? অন্যান্য উপায় আছে যেখানে আমি "ওভারস্ক্রোলিং" নিয়ন্ত্রণ করতে পারি?

Comments

আমি উদাহরণস্বরূপ, নতুন ট্যাব পৃষ্ঠায় এটি সক্ষম করার চেষ্টা করছি । এখানে জড়িত বিষয়গুলি বোঝার চেষ্টা করছি।

— র্যান্ডমব্লু

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

— জন ইজল্যান্ড

Answer 1

গৃহীত সমাধানটি আমার পক্ষে কাজ করছে না। এখনও স্ক্রোল করতে সক্ষম হয়ে আমি এটি কাজ করার একমাত্র উপায় হ'ল:

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

body {
    height: 100%;
    overflow: auto;
}

Comments

এই সমাধান htmlস্টাইলিং হ্যাককে সম্মান করে না এমন উভয় ডিভাইসের জন্য এবং মোবাইল ওয়েব ব্রাউজারগুলির জন্য সমস্যাযুক্ত body, যা htmlনির্ধারিত উচ্চতাটিকে উপেক্ষা করার সম্পূর্ণ উপচে পড়া দেখায় ।

— চালিত

এই সমাধানটি ম্যাকের জন্য ক্রোম 46 হিসাবে কাজ করে না। এটি ওভার-স্ক্রোলিং প্রতিরোধ করে তবে কোনও শিশু উপাদানগুলির মধ্যে স্ক্রোলযোগ্য নয়।

— ড্যানিয়েল বনেল

তারপরে, আপনি সাধারণত যে স্ক্রোলটপ মানটি পাবেন তা কীভাবে পাবেন $(window).scrollTop?

— গুগ

কোনও সমাধানই ম্যাকের জন্য ক্রোম 49 এ বা ম্যাকের জন্য ফায়ারফক্স 44 এ কাজ করে না। window.scrollYসর্বদা হয় 0।

— মোমো

ক্রোমের পক্ষে কাজ করে তবে সাফারি নয়।

— ব্রেটন ওয়েড

Answer 2

Chrome 63+, ফায়ারফক্স 59+ এবং অপেরা 50+ আপনি সিএসএসে এটি করতে পারেন:

body {
  overscroll-behavior-y: none;
}

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

তবে আপনি ওভার-স্ক্রোলিংয়ের উপর নিজের প্রভাব বা কার্যকারিতা বাস্তবায়নের জন্য নির্বাচন করতে পারেন। আপনি উদাহরণস্বরূপ পৃষ্ঠাটি অস্পষ্ট করতে এবং একটি ঝরঝরে অ্যানিমেশন যুক্ত করতে চান:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%; 
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

ব্রাউজার সমর্থন

এই লেখার হিসাবে ক্রোম 63+, ফায়ারফক্স 59+ এবং অপেরা 50+ এটি সমর্থন করে। এজ পাবলিকভাবে সমর্থন করেছেন যখন সাফারি অজানা। এমডিএন ডকুমেন্টেশনে এখানে অগ্রগতি এবং বর্তমান ব্রাউজারের সামঞ্জস্য ট্র্যাক করুন

অধিক তথ্য

• ক্রোম 63 রিলিজ ভিডিও
• ক্রোম release৩ রিলিজ পোস্টে - আমি উপরে লিখেছি এমন সমস্ত কিছুর লিঙ্ক এবং বিশদ রয়েছে।
• overscroll-behavior সিএসএস স্পেক
• এমডিএন ডকুমেন্টেশন

Comments

এটি আমার মতে সেরা সমাধান। এবং সহজ। সমস্ত upvotes সঙ্গে এক সমস্যাযুক্ত হতে পারে।

— টিটিসি

এই আমার জন্য ভাল কাজ করেছে।

— রাজীলেশ পানোলি

Answer 3

আপনি এটি রোধ করতে পারেন এমন একটি উপায়, নিম্নলিখিত সিএসএস ব্যবহার করা হচ্ছে:

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

body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

এইভাবে শরীরে কখনও কোনও ওভারফ্লো হয় না এবং পৃষ্ঠার শীর্ষে এবং নীচে স্ক্রোল করার সময় "বাউন্স" হবে না। ধারকটি এর সামগ্রীর মধ্যে পুরোপুরি স্ক্রোল করবে will এটি সাফারি এবং ক্রোমে কাজ করে।

সম্পাদন করা

<div>মোড়ক হিসাবে অতিরিক্ত- এলিমেন্ট কেন কার্যকর হতে পারে:
ফ্লোরিয়ান ফিল্ডহাউসের সমাধানটি কিছুটা কম কোড ব্যবহার করে এবং খুব সূক্ষ্মভাবে কাজ করে। যাইহোক, ভিউপোর্টের প্রস্থের চেয়ে বেশি হওয়া সামগ্রীর ক্ষেত্রে এটিতে কিছুটা কৌতূহল থাকতে পারে। এক্ষেত্রে উইন্ডোর নীচে স্ক্রোলবারটি ভিউপোর্টের অর্ধেক পথ থেকে সরানো হয় এবং সনাক্ত করা / পৌঁছানো শক্ত। body { margin: 0; }উপযুক্ত হলে এটি এড়ানো যায় । আপনি এই সিএসএস যুক্ত করতে পারবেন না এমন পরিস্থিতিতে স্ক্রোলবারটি সর্বদা সম্পূর্ণরূপে দৃশ্যমান হওয়ায় মোড়ক উপাদানটি কার্যকর।

নীচে একটি স্ক্রিনশট খুঁজুন:

Comments

এটি যদি একবার কাজ করে তবে এটি আর কাজ করে না। আমার ক্রোম ভি 37 এ, যেখানে কোনও উপাদান স্ক্রোল করে সেখানে ওভারস্কল আচরণ ঘটবে।

— bbsimonbb

@ ব্যবহারকারী 1585345 আমি এখনই এটি ওএস এক্স-এ ক্রোম 38-এ পরীক্ষা করেছি এবং এটি এখনও কাজ করে (সাফারিতেও)। আমি যে ফাইলটি ব্যবহার করছি তা এখানে। আপনি কি এই ফাইল দিয়ে এটি পরীক্ষা করতে পারেন? সেন্ডস্পেস.কম এ ফাইলটির সরাসরি লিঙ্ক ।

— সন্নিবেশকারী নাম এখানে

আমি উপরের ফাইলটি পরীক্ষা করেছি এবং এখনও আমার কাছে বাউন্স রয়েছে। আমি সন্দেহ করি আমরা এই রহস্যের তলদেশে উঠব না। ক্রোম 37

— বিবিসিমোনবিবি

আপনার অতিরিক্ত র‍্যাপার ডিভের দরকার নেই। আরও ভাল সমাধানের জন্য নীচের উত্তরটি দেখুন।

— জয়ডি 3 ই

এই সমাধানটি ম্যাকের জন্য ক্রোম 46 হিসাবে কাজ করে না। এটি ওভার-স্ক্রোলিং প্রতিরোধ করে তবে কোনও শিশু উপাদানগুলির মধ্যে স্ক্রোলযোগ্য নয়।

— ড্যানিয়েল বনেল

Answer 4

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

document.body.addEventListener('touchmove', function(event) {
  console.log(event.source);
  //if (event.source == document.body)
    event.preventDefault();
}, false);

Answer 5

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

Comments

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

— pirho

আপনার উত্তরটির দৈর্ঘ্য এবং সামগ্রীর কারণে পতাকাঙ্কিত হয়েছিল। আমি সংশোধন করার পরামর্শ দিই। সম্ভবত অতিরিক্ত বিশদ যুক্ত করুন।

— www139

position: fixedত্রাণকর্তা!

— নিজামিল পুত্র

Answer 6

এইভাবে চেষ্টা করুন

body {
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}

Answer 7

position: absoluteআমার জন্য কাজ কর. আমি Chrome 50.0.2661.75 (64-bit)ওএসএক্স পরীক্ষা করেছি ।

body {
  overflow: hidden;
}

// position is important
#element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

Answer 8

ওয়েবপৃষ্ঠার উচ্চতা সমান ব্যতীত বাউন্স এফেক্টটি অক্ষম করা যায় না window.innerHeight, আপনি আপনার উপ-উপাদানগুলিকে স্ক্রোল করতে দিতে পারেন।

html {
    overflow: hidden;
}