বডি স্ক্রোলিং প্রতিরোধ করুন তবে ওভারলে স্ক্রোলিংকে অনুমতি দিন

Question

আমি এমন একটি "লাইটবক্স" ধরণের সমাধান খুঁজছি যা এটির অনুমতি দেয় তবে এখনও এটি খুঁজে পায় নি (দয়া করে, আপনি যদি কিছু জানেন তবে প্রস্তাব দিন)।

আচরণ আমি পুনঃ চেষ্টা করছি শুধু আপনার এ দেখতে চাই পাীূহপাগহীপাপাগহগ পিন্টারেস্ট যখন একটি চিত্র ক্লিক করুন। ওভারলেটি স্ক্রোলযোগ্য ( পুরো ওভারলে যেমন কোনও পৃষ্ঠার উপরে পৃষ্ঠার মতো চলে আসে ) তবে ওভারলেটির পিছনে শরীরটি স্থির থাকে।

আমি এটি কেবলমাত্র সিএসএস দিয়ে তৈরি করার চেষ্টা করেছি ( অর্থাত্ divপুরো পৃষ্ঠার উপরে একটি ওভারলে এবং এর সাথে বডিoverflow: hidden )) তবে এটি divস্ক্রোলযোগ্য হতে বাধা দেয় না ।

স্ক্রোলিং থেকে শরীর / পৃষ্ঠা কীভাবে রাখবেন তবে পূর্ণস্ক্রিন পাত্রে ভিতরে স্ক্রোলিং রাখবেন কীভাবে?

Comments

ওভারফ্লো-ওয়াই স্ক্রোলের সাথে ঠিক করা পজিশনটি ব্যবহার করে এখানে কেবল হান্ড্রেটগুলির মতো একটি "ওভারলে" প্লাগইন নেই?

— ggzone

লিন্সের প্রাচীরের পেছনে এর লিখিত সামগ্রী থাকায় পিন্টেস্টের লিঙ্কটি সহায়তা করে না।

— 2540625

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

— আনাবেল

Answer 1

তত্ত্ব

পিনটারেস্ট সাইটের বর্তমান প্রয়োগের দিকে তাকালে (এটি ভবিষ্যতে পরিবর্তিত হতে পারে) যখন আপনি ওভারলেটি খুলবেন তখন কোনও noscrollশ্রেণি bodyউপাদানটিতে প্রয়োগ করা হয় এবং overflow: hiddenসেট হয়ে যায়, এভাবে bodyআর স্ক্রোলযোগ্য হয় না।

আস্তরণ (on-the-মাছি অথবা ইতিমধ্যেই পৃষ্ঠা ভেতরে ও মাধ্যমে দৃশ্যমান নির্মিত display: block, এটা কোন পার্থক্য তোলে) আছে position : fixedএবং overflow-y: scrollসঙ্গে, top, left, rightএবং bottomবৈশিষ্ট্য সেট 0: এই শৈলী তোলে আস্তরণ পুরো ভিউপোর্ট পূরণ করুন।

divআস্তরণ ভিতরে পরিবর্তে শুধু হয় position: staticতারপর আপনি দেখতে উল্লম্ব স্ক্রোল যে উপাদান সাথে সম্পর্কিত হয়। ফলস্বরূপ সামগ্রীটি স্ক্রোলযোগ্য তবে ওভারলে স্থির থাকে।

আপনি যখন জুমটি বন্ধ করেন আপনি ওভারলেটি (মাধ্যমে display: none) আড়াল করেন এবং তারপরে আপনি এটি পুরোপুরি জাভাস্ক্রিপ্টের মাধ্যমে মুছে ফেলতে পারেন (বা কেবলমাত্র অভ্যন্তরীণ সামগ্রীটি কীভাবে এটি ইনজেক্ট করবেন তা আপনার উপর নির্ভরশীল)।

একটি চূড়ান্ত পদক্ষেপ হিসেবে আপনার কাছে অপসারণ করতে হবে noscrollক্লাসের body(তার প্রাথমিক মান তাই ওভারফ্লো সম্পত্তি আয়)

---

কোড

কোডেপেন উদাহরণ

(এটি aria-hiddenদেখাতে ও আড়াল করতে এবং এর অ্যাক্সেসযোগ্যতা বাড়াতে ওভারলেটির বৈশিষ্ট্য পরিবর্তন করে এটি কাজ করে )।

মার্কআপ
(ওপেন বোতাম)

<button type="button" class="open-overlay">OPEN LAYER</button>

(ওভারলে এবং বন্ধ বোতাম)

<section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

সিএসএস

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }

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

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;

  }, false);

});

---

অবশেষে, এখানে আরও একটি উদাহরণ রয়েছে যেখানে সম্পত্তিতে transitionপ্রয়োগ হওয়া কোনও সিএসএসের দ্বারা ফিড-ইন প্রভাবের সাথে ওভারলেটি খোলে opacity। এছাড়াও padding-rightস্ক্রোলবার অদৃশ্য হয়ে গেলে অন্তর্নিহিত পাঠ্যের উপর প্রতিস্থাপন এড়াতে একটি প্রয়োগ করা হয়।

কোডপেন উদাহরণ (বিবর্ণ)

সিএসএস

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     top: 0; left: 0; right: 0; bottom: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}

Comments

এটা সঠিক উত্তর. এটি সঠিক হওয়ায় কারও এটির একটি চেক চিহ্ন দেওয়া উচিত।

— স্কুটা পি

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

— এস

এটা ভাল কাজ করে। স্ক্রোলযোগ্য ভিউপোর্ট পাত্রে divঅবশ্যই সিএসএস শৈলী থাকতে হবে position:fixedএবং উল্লম্ব ওভারফ্লো স্ক্রোলযোগ্য থাকতে হবে। আমি সফলভাবে ব্যবহার করেছি overflow-y:auto;এবং আইওএস গতি / জড়তা স্ক্রোলিংয়ের জন্য, আমি সিএসএসে যুক্ত করেছি -webkit-overflow-scrolling:touch;। আমি ব্যবহৃত display:block;, width:100%;এবং height:100%;CSS এর একটি পূর্ণ পৃষ্ঠা ভিউপোর্ট আছে।

— স্লিঙ্ক

দুঃখিত আমি বুঝতে পারছি না. শরীরকে উপচে প্রবাহিত করা: লুকানো আমার আইপ্যাড আইওএস 7 এ স্থিতিস্থাপকীয় শরীরের স্ক্রোলিং অক্ষম করে না। সুতরাং আমাকে আমার জেএসের মধ্যে যুক্ত করতে হয়েছিল: ডকুমেন্ট.বিডি.এডিডিএভেন্টলিস্টনার ('টাচমোভ', ফাংশন (ইভেন্ট) {ইভেন্ট.প্রিভেন্টডেফল্ট (); false, মিথ্যা); যা SADLY খুব সহজেই স্ক্রোলযোগ্য হতে সমস্ত উপাদানকে অক্ষম করে। না (অতিরিক্ত প্লাগইন ছাড়াই) কোনো সমাধান এতদূর পাওয়া যায়

— Garavani

ওভারলে সক্রিয় হওয়ার পরে যদি ব্যবহারকারী ইতিমধ্যে শরীরকে নীচে থেকে স্ক্রল করে ফেলেছে, আপনি ওভারফ্লো সেট করার সময় এটি শরীরে উপরে উঠে যাবে: লুকানো; কোন উপায় এই কাছাকাছি?

— বুজরন অ্যান্ডারসন

Answer 2

আপনি যদি আইওএসে ওভারসক্রোলিং প্রতিরোধ করতে চান, আপনি নিজের .noscrol শ্রেণিতে স্থির অবস্থান যুক্ত করতে পারেন

body.noscroll{
    position:fixed;
    overflow:hidden;
}

Comments

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

— tzi

ব্যবহারের সাথে আর একটি সমস্যা position:fixedহ'ল এটি আমার মূল দেহের আকার পরিবর্তন করছিল। হতে পারে এটি অন্যান্য সিএসএসের সাথে সাংঘর্ষিক ছিল, তবে overflow:hiddenএটির জন্য যা প্রয়োজন ছিল

— ডেক্স

আপনি যখন ইনপুট ক্ষেত্রগুলিতে ট্যাব করবেন তখন ফোকাস জাম্পিং ব্রেক করছে

— আতাভা 32

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

— am80l

@ am80l দুঃখিত আমার আগের মন্তব্য সুপার অস্পষ্ট ছিল: ট্যাব অর্ডার কাজ করবে, কিন্তু পর্দা jolts যখন আপনি iOS সাফারি (চালু ক্ষেতের মধ্য দিয়ে ট্যাব stackoverflow.com/questions/31126330/... )

— Atav32

Answer 3

ব্যবহার করবেন না overflow: hidden;উপর body। এটি স্বয়ংক্রিয়ভাবে সমস্ত কিছু শীর্ষে স্ক্রোল করে। জাভাস্ক্রিপ্টের কোনও প্রয়োজন নেই। ব্যবহার করুন overflow: auto;। এই সমাধানটি এমনকি মোবাইল সাফারির সাথেও কাজ করে:

এইচটিএমএল স্ট্রাকচার

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

স্টাইল

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

ডেমো দেখুন এখানে এবং সোর্স কোড এখানে ।

হালনাগাদ:

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

Comments

শীতল সমাধান, তবে তারপরে আমার সমস্ত সামগ্রী একটি

— ডিভিতে মুড়ে ফেলতে হবে

এটি একটি আদর্শ সমাধান। কারও যদি এটির সাথে সমস্যা হয় তবে html, body { height: 100%; }এটি সঠিকভাবে কাজ করার জন্য আপনাকে (ডেমো হিসাবে) যুক্ত করতে হতে পারে ।

— জন

@ ব্যবহারকারী 18490 কৌনিক / উপাদান অংশটির এই সমাধানটি কাজ করছে এমনটি করার কোনও সম্পর্ক নেই।

— লুসিয়া

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

— nitely

এটি আরও শক্তিশালী বিকল্প, তবে এটি জিনিসগুলিকে কিছুটা জটিল করে তোলে। উদাহরণস্বরূপ, পেজআপ এবং পৃষ্ঠাডাউন রিফ্রেশে কাজ করবে না। .offset()গণনার জন্য মানগুলি ব্যবহার করে এমন কিছু

— গণ্ডগোল

Answer 4

overscroll-behavior সামগ্রীর উপরে / নীচে পৌঁছানোর সময় CSS সম্পত্তি ব্রাউজারের ডিফল্ট ওভারফ্লো স্ক্রোল আচরণকে ওভাররাইড করতে দেয়।

ওভারলেতে কেবল নিম্নলিখিত শৈলীগুলি যুক্ত করুন:

.overlay {
   overscroll-behavior: contain;
   ...
}

কোডপেন ডেমো

বর্তমানে ক্রোম, ফায়ারফক্স এবং আইই ( ক্যানিউজ ) এ কাজ করে

আরও তথ্যের জন্য গুগল বিকাশকারীদের নিবন্ধটি পরীক্ষা করুন ।

Comments

আমি আপনাকে জানাতে পুরোপুরি এসেছি যে এটি সর্বশেষতম ক্রোম, মজিলা এবং অপেরাতে কাজ করছে। একটি চমৎকার সময় আছে!

— ওয়ান্নাব জাভাগীক

কারও এটির উপর অনুগ্রহ যুক্ত করা উচিত। এটিই সঠিক সমাধান। কোন জাভাস্ক্রিপ্ট প্রয়োজন। :)

— জোসেফ.এল.হুনসেকার

এই সমাধানটিতে সমস্যা হ'ল ওভারলে স্ক্রোলযোগ্য হলে কেবল এটি কাজ করে। আপনার যদি কোনও মডেল থাকে এবং এটি সমস্ত স্ক্রিনে ফিট করে তাই ভিতরে কোনও স্ক্রোল নেই - এটি শরীরের স্ক্রোলটি থামিয়ে দেবে না। এটি এবং এটি সাফারিতে মোটেও কাজ করে না :)

— ওয়াটারপ্লে

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

— ২৩7777

Answer 5

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

scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';

তারপরে, আপনি যখন আবার ওভারলেটি সরিয়ে ফেলেন তখন আপনাকে স্ক্রোল অবস্থানটি পুনরায় সেট করতে হবে:

window.scrollTo(0, scrollPosition);

আমি এই সমাধানটি প্রদর্শনের জন্য একটি সামান্য উদাহরণ তৈরি করেছি

let overlayShown = false;
let scrollPosition = 0;

document.querySelector('.toggle').addEventListener('click', function() {
  if (overlayShown) {
		showOverlay();
  } else {
    removeOverlay();
  }
  overlayShown = !overlayShown;
});

function showOverlay() {
    scrollPosition = window.pageYOffset;
  	const mainEl = document.querySelector('.main-content');
    mainEl.style.top = -scrollPosition + 'px';
  	document.body.classList.add('show-overlay');
}

function removeOverlay() {
		document.body.classList.remove('show-overlay');
  	window.scrollTo(0, scrollPosition);
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = 0;
}

.main-content {
  background-image: repeating-linear-gradient( lime, blue 103px);
  width: 100%;
  height: 200vh;
}

.show-overlay .main-content {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: scroll; /* render disabled scroll bar to keep the same width */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.show-overlay .overlay {
  display: block;
}

.overlay-content {
  margin: 50px;
  background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px);
  height: 120vh;
}

.toggle {
  position: fixed;
  top: 5px;
  left: 15px;
  padding: 10px;
  background: red;
}

/* reset CSS */
body {
  margin: 0;
}

<main class="main-content"></main>

  <div class="overlay">
    <div class="overlay-content"></div>
  </div>
  
  <button class="toggle">Overlay</button>

Comments

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

— ফোরাল্লেপসিলন

এটিই একমাত্র এবং একমাত্র সমাধান যা আমার জন্য 100% সঠিকভাবে কাজ করেছিল, আমি আশা করি এই উত্তরটি আগে খুঁজে পেয়েছি।

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

Answer 6

এটি লক্ষণীয় যে মাঝে মাঝে বডি ট্যাগটিতে "ওভারফ্লো: লুকানো" যুক্ত করা কাজটি করে না। এই ক্ষেত্রে, আপনাকে সম্পত্তিটি এইচটিএমএল ট্যাগেও যুক্ত করতে হবে।

html, body {
    overflow: hidden;
}

Comments

আইওএসের জন্য, width: 100%; height: 100%;

— গ্যাভিন

এটি এই প্রশ্নের অন্যান্য সমাধানগুলির অনেকগুলি ক্ষেত্রেও দেখা সমস্যার সমাধান করে না — উইন্ডোটি কোথাও স্ক্রল করা থাকলেও মোডালটি যখন খোলা থাকে তখন পৃষ্ঠার শীর্ষে স্ক্রোল তৈরি করে। আমি ফিলিপ মিটারের সলিউশনটি এখানে বেশিরভাগ ক্ষেত্রে জুড়ে থাকা সেরা বিকল্প হিসাবে খুঁজে পেয়েছি ।

— সিএলএল

আপনি যে সমস্যাটি (ওয়েব বা মোবাইলে) কথা বলছেন তা আমি কখনও অভিজ্ঞতা করি নি। আপনি কি পুরো কোডটি (ডিওএম সহ) ভাগ করে নিতে পারেন যা কোনও ফিডল বা জেসবিনে কাজ করে না? যাই হোক না কেন, আমি এই সমস্যাটি মোকাবেলায় জাভাস্ক্রিপ্ট ওয়ার্কআরাউন্ড ব্যবহার করা থেকে সতর্ক am

— ফ্রান্সিসকো হজ

Answer 7

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

<div id="content">
</div>
<div id="overlay">
</div>

দেখুন ব্রাউজারের প্রধান স্ক্রলবার সঙ্গে স্ক্রোল বিশেষ DIV বিষয়বস্তু তার কাজ দেখতে।

Comments

সর্বোত্তম সমাধান, সত্য "বাক্সের বাইরে" চিন্তাভাবনা, ঠিক তেমন ভাল শব্দযুক্ত নয়।

— চিহ্নিত করুন

যদি পৃষ্ঠাটি স্ক্রল করে না এমন উপাদানটি যদি শরীর না থাকে তবে টপবারগুলি মোবাইলে স্লাইড করে না you

— সেফ রিড

Answer 8

নির্বাচিত উত্তর সঠিক, তবে কিছু সীমাবদ্ধতা রয়েছে:

• আপনার আঙুল দিয়ে সুপার হার্ড "ফ্লিংস" এখনও <body>পটভূমিতে স্ক্রোল করবে
• <input>মডেলে একটি আলতো চাপ দিয়ে ভার্চুয়াল কীবোর্ড খোলার ফলে ভবিষ্যতের সমস্ত স্ক্রোল এতে সরাসরি পরিচালিত হবে<body>

আমার প্রথম ইস্যুর কোনও সমাধান নেই, তবে দ্বিতীয়টিতে কিছুটা আলোকপাত করতে চেয়েছিলাম। বিভ্রান্তিমূলকভাবে, বুটস্ট্র্যাপে কীবোর্ড ইস্যু নথিভুক্ত থাকত, তবে তারা দাবি করেছিল যে এটি ঠিক করা হয়েছে, উদাহরণস্বরূপ http://output.jsbin.com/cacido/quiet উল্লেখ করে।

প্রকৃতপক্ষে, এই উদাহরণটি আমার পরীক্ষাগুলির সাথে আইওএসে দুর্দান্ত কাজ করে। তবে এটি সর্বশেষতম বুটস্ট্র্যাপ (v4) এ আপগ্রেড করলে এটি ভেঙে যায়।

তাদের মধ্যে পার্থক্য কী তা জানার চেষ্টায়, আমি একটি পরীক্ষার কেস আর বুটস্ট্র্যাপ, http://codepen.io/WestonThayer/pen/bgZxBG এর উপর নির্ভর না করে কমিয়ে দিয়েছি ।

সিদ্ধান্ত গ্রহণকারী কারণগুলি উদ্ভট। কীবোর্ড ইস্যু এড়ানো প্রয়োজন মনে হচ্ছে যে background-color করা হয় না রুট নির্ধারণ <div>মোডাল ধারণকারী এবং মোডাল বিষয়বস্তু অন্য নেস্টেড করা আবশ্যক <div>যা থাকতে পারে, background-colorসেট।

এটি পরীক্ষা করার জন্য কোডপেন উদাহরণে নীচের লাইনটি অসুবিধা করুন:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* UNCOMMENT TO BREAK */
/*   background-color: white; */
}

Answer 9

টাচ ডিভাইসের জন্য, ওভারলেয়ের মোড়কে 1px প্রশস্ত, 101vhন্যূন-উচ্চতা স্বচ্ছ ডিভ যুক্ত করার চেষ্টা করুন । তারপরে -webkit-overflow-scrolling:touch; overflow-y: auto;র‍্যাপারে যুক্ত করুন। এই কৌশলটি মোবাইল সাফারিটিকে ওভারলে ভাবতে স্ক্রোলযোগ্য, যাতে শরীর থেকে স্পর্শ ইভেন্টটিকে বাধা দেয়।

এখানে একটি নমুনা পৃষ্ঠা। মোবাইল সাফারি এ খুলুন: http://www.originalfunction.com/overlay.html

https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f

Comments

জুপ, যে কৌশলটি। -webkit-overflow-scrolling:touch;প্রতিটি স্ক্রোলযোগ্য ধারককে স্পর্শ ইভেন্টগুলিকে বাধা দিতে কেবল যুক্ত করতে হয়েছিল।

— মাটি

আমি এখনও আইফোনে স্ক্রোল করতে সক্ষম হয়েছি

— সাইমন জান্ডারা

পছন্দ করুন এটি ব্যাকগ্রাউন্ড স্ক্রল প্রতিরোধে দুর্দান্ত কাজ করে

— Godblessstrawberry

Answer 10

আপনি যে আচরণটি আটকাতে চান তাকে স্ক্রোল চেইন বলে। এটি অক্ষম করতে, সেট করুন

overscroll-behavior: contain;

সিএসএসে আপনার ওভারলেতে।

Answer 11

আমি এই প্রশ্নটি আইপ্যাড এবং আইফোনটিতে আমার পৃষ্ঠাটি দিয়ে থাকা সমস্যাটি সমাধান করার চেষ্টা করে দেখেছি - যখন আমি চিত্রের সাথে ফিক্সড ডিভিড হিসাবে প্রদর্শিত ডিভিড প্রদর্শন করছিলাম তখন বডি স্ক্রল করছিল।

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

আইওএস সাফারির রাবার ব্যান্ড স্ক্রোলিং সম্পর্কে আমি ছয়টি জিনিস শিখেছি

প্রস্তাবিত হিসাবে আমি লিঙ্কটি পুরানো হওয়ার ক্ষেত্রে ব্লগ পোস্টের প্রধান পয়েন্টগুলি অন্তর্ভুক্ত করি।

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

এই স্ট্যাকওভারফ্লো উত্তরের উপর ভিত্তি করে আপনি নিয়ন্ত্রণ করতে পারেন যে অক্ষম-স্ক্রোলিংযুক্ত উপাদানগুলি যখন টাচমোভ ইভেন্টটি ট্রিগার করা হয় তখন তাদের ডিফল্ট স্ক্রোল ক্রিয়া সম্পাদন করা উচিত নয় ""

 document.ontouchmove = function ( event ) {

    var isTouchMoveAllowed = true, target = event.target;

    while ( target !== null ) {
        if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }

    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};

এবং তারপরে ডিভ পৃষ্ঠায় অক্ষম-স্ক্রোলিং ক্লাস রাখুন:

<div class="page disable-scrolling">

Answer 12

আপনি কিছু "নতুন" সিএসএস এবং জিকুয়েরীর সাহায্যে এটি সহজেই করতে পারেন।

প্রাথমিকভাবে: body {... overflow:auto;} JQuery এর সাহায্যে আপনি গতিশীলভাবে 'ওভারলে' এবং 'বডি' এর মধ্যে স্যুইচ করতে পারেন। যখন 'বডি' থাকে তখন ব্যবহার করুন

body {
   position: static;
   overflow: auto;
}

'ওভারলে' ব্যবহার করার সময়

body {
   position: sticky;
   overflow: hidden;
}

স্যুইচটির জন্য JQuery ('বডি' -> 'ওভারলে'):

$("body").css({"position": "sticky", "overflow": "hidden"});

স্যুইচটির জন্য JQuery ('ওভারলে' -> 'বডি'):

$("body").css({"position": "static", "overflow": "auto"});

Answer 13

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

function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}

Answer 14

নিম্নলিখিত HTML ব্যবহার করুন:

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

তারপরে জাভাস্ক্রিপ্টটি আটকাতে এবং স্ক্রোলিং বন্ধ করতে:

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

তারপরে জিনিসগুলি স্বাভাবিক অবস্থায় ফিরে পেতে:

$(".page").off("touchmove");

Answer 15

যদি উদ্দেশ্যটি মোবাইল / টাচ ডিভাইসগুলিতে অক্ষম করা হয় তবে তা করার সহজ সরল উপায়টি হ'ল ব্যবহার করা touch-action: none;।

উদাহরণ:

const app = document.getElementById('app');
const overlay = document.getElementById('overlay');

let body = '';

for (let index = 0; index < 500; index++) {
  body += index + '<br />';
}

app.innerHTML = body;
app.scrollTop = 200;

overlay.innerHTML = body;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#app {
  background: #f00;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  line-height: 20px;
}

#overlay {
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 0 0 100px;
  overflow: scroll;
}

<div id='app'></div>
<div id='overlay'></div>

(উদাহরণ স্ট্যাক ওভারফ্লো প্রসঙ্গে কাজ করে না। এটি আপনাকে একা একা পৃষ্ঠাতে পুনরায় তৈরি করতে হবে))

আপনি যদি ধারকটির স্ক্রোলিং অক্ষম করতে চান #appতবে কেবল যুক্ত করুন touch-action: none;।

Comments

যদি টাচ অ্যাকশনটি আসলে iOS এ কাজ করে। এবং সেক্ষেত্রে আপনার সম্পূর্ণ "অ্যাপ্লিকেশন" কে আলাদা ডিভের মধ্যে আবৃত করার দরকার হবে না।

— পাওয়ারবয়

Answer 16

এটা চেষ্টা কর

var mywindow = $('body'), navbarCollap = $('.navbar-collapse');    
navbarCollap.on('show.bs.collapse', function(x) {
                mywindow.css({visibility: 'hidden'});
                $('body').attr("scroll","no").attr("style", "overflow: hidden");
            });
            navbarCollap.on('hide.bs.collapse', function(x) {
                mywindow.css({visibility: 'visible'});
                $('body').attr("scroll","yes").attr("style", "");
            });

Answer 17

আপনি যদি বডি / এইচটিএমএল স্ক্রোলটি বন্ধ করতে চান তবে নীচের হিসাবে যুক্ত করুন

সিএসএস

    html, body {
        height: 100%;
    }

    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);

        .overlay-content {
            height: 100%;
            overflow: scroll;
        }
    }

    .background-content{
        height: 100%;
        overflow: auto;
    }

এইচটিএমএল

    <div class="overlay">
        <div class="overlay-content"></div>
    </div>

    <div class="background-content">
        lengthy content here
    </div>

মূলত, আপনি জেএস ছাড়াই এটি করতে পারেন।

মূল ধারণাটি হ'ল এইচটিএমএল / দৈর্ঘ্য উচ্চতা সহ: 100% এবং ওভারফ্লো: অটো। এবং আপনার ওভারলে এর ভিতরে আপনি আপনার প্রয়োজনের ভিত্তিতে স্ক্রোলটি সক্ষম / অক্ষম করতে পারবেন।

আশাকরি এটা সাহায্য করবে!

Answer 18

আমার ক্ষেত্রে, এই সমাধানগুলির কোনওটিরই আইফোনে কার্যকর হয়নি (আইওএস 11.0)।

আমার সমস্ত ডিভাইসে কাজ করা একমাত্র কার্যকর ফিক্সটি হ'ল - আইওএস -10-সাফারি-রোধ-স্ক্রোলিং-এর পিছনে-একটি-নির্দিষ্ট-ওভারলে-এবং রক্ষণাবেক্ষণ-স্ক্রোল-অবস্থান

Answer 19

স্ক্রোল বারটি অক্ষম ও সক্ষম করার জন্য নীচের কোডটি ব্যবহার করুন।

Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();