শুধু স্ক্রোলটি এটি লুকিয়ে রাখবেন না?

Question

আমি লাইটবক্স ব্যবহার করার সময় পিতামাতার এইচটিএমএল / বডি স্ক্রোলবারটি অক্ষম করার চেষ্টা করছি। এখানে মূল শব্দটি অক্ষম । আমি এটি দিয়ে আড়াল করতে চাই নাoverflow: hidden; ।

এর কারণ হ'ল overflow: hiddenসাইটটি ঝাঁপিয়ে পড়ে এবং স্ক্রোলটি যেখানে ছিল সেটিকে নিয়ে যায় take

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

Comments

কোন স্ক্রোলিং সম্ভব? (লাইটবক্সের কোনও স্ক্রোলবার রয়েছে?)

— Vidime বিদাস

সাইটটি স্ক্রোলিং পেয়েছে তবে লাইটবক্স খোলা থাকাকালীন আমি এটি অক্ষম করতে চাই। আমি কেবল জানতে চাইছি যে এটি দেখানোর সময় কোনও স্ক্রোলবারটি অক্ষম করা সম্ভব কিনা। লাইটবক্সে বা অন্য যেভাবে কীভাবে এটি করা যায় তার মতো আর কিছুই প্রয়োজন নেই।

— দেজন.এস

স্ক্রোলবারের সাথে লাইটবক্স ব্যবহার করতে সমস্যা কী?

— ম্যানি

@ দেজন কারণ আমি জানি যে কীভাবে সমস্ত স্ক্রোলিং অক্ষম করতে হয় - যা মূল স্ক্রোলবারটি অক্ষম করে, তবে লাইটবক্সের মধ্যে একটিও ...

— Vidime বিদাস

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

— ইন্ট্রিক্রটর

Answer 1

ওভারলেয়ারের নীচে পৃষ্ঠাটি যদি শীর্ষে "স্থির" করা যায়, আপনি ওভারলে খুললে আপনি সেট করতে পারেন

body { position: fixed; overflow-y:scroll }

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

body { position: static; overflow-y:auto }

আমি কেবল এই পথে প্রস্তাব রেখেছি কারণ আপনার কোনও স্ক্রোল ইভেন্ট পরিবর্তন করার দরকার নেই

হালনাগাদ

আপনি কিছুটা উন্নতিও করতে পারেন: document.documentElement.scrollTopস্তরটি খোলার ঠিক আগে আপনি যদি জাভাস্ক্রিপ্টের মাধ্যমে সম্পত্তিটি পেয়ে থাকেন তবে আপনি গতিশীলভাবে topশরীরের উপাদানটির সম্পত্তি হিসাবে সেই মানটি নির্ধারণ করতে পারেন : এই পদ্ধতির সাথে পৃষ্ঠাটি তার জায়গায় দাঁড়াবে, আপনি যদি কিছু না করেন তবে ' উপরে থাকলে বা যদি আপনি ইতিমধ্যে স্ক্রোল করে থাকেন।

CSS

.noscroll { position: fixed; overflow-y:scroll }

জাতীয়

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

Comments

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

— Dejan.S

একটি সামান্য পরিবর্তন সঙ্গে এটি কাজ। আমি প্রস্থ যুক্ত করেছি: 100%; আমি সমাধানের সাথে আমার প্রশ্ন আপডেট করেছি তবে আপনি প্রস্থের সাথে আপনার পরিবর্তন করতে পারেন: 100% ;? পরামর্শের জন্য ধন্যবাদ

— Dejan.S

কেন জানি না, তবে এটি আমার পক্ষে আরও ভাল কাজ করে: $('body').css('top', -($('body').scrollTop()) + 'px').addClass('noscroll');

— PDXIII

@ হোয়াইটসিরোই, আপনি ঠিক বলেছেন আমি ফিডলটি আপডেট করেছি: jsfiddle.net/evpozdniakov/2m8km9wg আপনাকে ধন্যবাদ!

— evpozdniakov

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

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

Answer 2

নির্বাচিত সমাধানটিতে চারটি সংযোজন:

1. আইইতে ডাবল স্ক্রোল বারগুলি রোধ করতে শরীরের পরিবর্তে এইচটিএমএলে 'নসক্রোল' প্রয়োগ করুন
2. 'এনস্ক্রোল' ক্লাস যুক্ত করার আগে আসলে স্ক্রোল বার আছে কিনা তা পরীক্ষা করতে । অন্যথায়, সাইটটি নতুন অ-স্ক্রোলিং স্ক্রোল বার দ্বারা চালিত লাফিয়ে উঠবে।
3. কোনও সম্ভাব্য স্ক্রোলটপ রাখতে যাতে পুরো পৃষ্ঠাটি শীর্ষে ফিরে না যায় (যেমন ফ্যাব্রিজিওর আপডেট, তবে 'নসক্রোল' শ্রেণি যুক্ত করার আগে আপনাকে মানটি ধরতে হবে)
4. সমস্ত ব্রাউজারগুলি http://help.dottoro.com/ljnvjiow.php এ নথিভুক্ত হিসাবে একইভাবে স্ক্রোলটপ হ্যান্ডেল করে না

সম্পূর্ণ সমাধান যা বেশিরভাগ ব্রাউজারের জন্য কাজ করে বলে মনে হচ্ছে:

সিএসএস

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

স্ক্রোল অক্ষম করুন

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

স্ক্রোল সক্ষম করুন

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

ডাবল স্ক্রোল বারের সমাধানের জন্য আমাকে সঠিক পথে রাখার জন্য এবং ব্রডিংগোকে ফ্যাবরিজিও এবং দেজনকে ধন্যবাদ

Comments

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

— মাইকেল খালিলি

এটি আইপ্যাডে ফ্যান্সিবক্সের সাথে লাইটবক্স চিত্র afterLoad()এবং afterCloseকলব্যাকগুলি সহ স্ক্রোলিং অক্ষম করতে পুরোপুরি কাজ করেছে । এই প্রশ্নটি অনুসন্ধান করার জন্য অন্যদের জন্য দরকারী হতে পারে।

— টমানো 18

"স্ক্রোল সক্ষম করুন" অংশে, আপনি "স্ক্রোল অক্ষম করুন" কল করার পরে এইচটিএমএল উপাদানটিতে থাকা স্টাইল বৈশিষ্ট্যটি সরাতে পারেন; তুমি না?

— বেন

jQuery দেশি DOM এর মানিককরণ করে scrollTopযেমন 'স্ক্রোল অক্ষম করুন' কোডের লাইন 2 হিসাবে প্রকাশ করা যেতে পারে $( window ).scrollTop()।

— বার্নি

আমি মনে করি এটিতে আরও একটি জিনিস যুক্ত করা দরকার। ওএসএক্স-এ ক্রোম-এ, ব্রাউজারের পক্ষে স্ক্রোলিংকে একটি ইলাস্টিক অনুভূতি প্রদান করে "ওভার-স্ক্রোল" করা সম্ভব। এই কোডটি দিয়ে যদি আপনি পৃষ্ঠার উপরে বা নীচে ধূসর অঞ্চলে থাকেন এবং আপনি এমন কোনও জায়গার উপরে ঘুরে দেখেন যেখানে আপনি স্ক্রোলিং অক্ষম করেন। এটি ব্রাউজার উইন্ডোটির উপরে / নীচে কোনও স্থানে আটকে থাকবে। এই কারণে আপনি একটি নেতিবাচক স্ক্রল মান জন্য একটি চেক যোগ করার জন্য প্রয়োজন: if (scrollTop < 0) { scrollTop = 0; }। এখানে gist.github.com/jayd3e/2eefbbc571cd1668544b অক্ষম করার জন্য সম্পূর্ণ কোডটি দেওয়া আছে ।

— জেডি 3 ই

Answer 3

JQuery অন্তর্ভুক্ত সহ:

---

নিষ্ক্রিয়

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

সক্ষম করা

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

ব্যবহার

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

Comments

এটি আমার জন্য নিখুঁত ছিল, পূর্ববর্তী উত্তরটি আমার পৃষ্ঠাটি বাউন্স করেছে, এটি একটি নয়

— বোগদান টমি

আনন্দিত আমি সাহায্য করতে পারে, আপনি খুব মোবাইল ডিভাইসের জন্য "touchmove" হল জন্য চেক করতে প্রয়োজন পারে, চিয়ার্স

— ceed

ঠিক আছে, এটি প্রায় আমার জন্য কাজ করে। এটি ফায়ারফক্সে উইন্ডোজ (ফায়ারফক্স, ক্রোম) এবং ম্যাকোজে বিস্ময়কর কাজ করেছে ... তবে আমি ক্রোম এবং সাফারিতে ম্যাকওএসের সাথে উইন্ডোজ আইই এবং এজতে গিয়েছিলাম। সমস্যাটি আর পৃষ্ঠার পাশ থেকে ওপারে ঝাঁপিয়ে পড়া সম্পর্কে ছিল না, তবে স্ক্রোলবারটি উপরে থেকে বর্তমান অবস্থানে ঝাঁপিয়েছিল বা পৃষ্ঠটি উপরে ঝাঁকুনি দিচ্ছিল। ম্যান, এতো তাই , এত কাছে। আমরা এখনও এটি কাজ করতে পারেন।

— স্টিভেন ভেন্টিমাগ্লিয়া

এটি আমার জন্য নিখুঁতভাবে কাজ করেছে, আপনাকে ধন্যবাদ! পৃষ্ঠার নীচে ওভারলে মেনুতেও এমন কোনও ওয়েবসাইটের আইডিয়াল টিউ ব্যবহার করুন!

— সাউরিওলজেফ

Answer 4

আমি ওপি

Fcalderan এর উত্তরের সাহায্যে আমি একটি সমাধান তৈরি করতে সক্ষম হয়েছি। আমি এখানে আমার সমাধানটি ছেড়ে দিচ্ছি কারণ এটি কীভাবে এটি ব্যবহার করবেন সে সম্পর্কে স্পষ্টতা এনেছে এবং একটি অত্যন্ত গুরুত্বপূর্ণ বিবরণ যোগ করেছে,width: 100%;

আমি এই ক্লাস যুক্ত

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

এটি আমার পক্ষে কাজ করেছে এবং আমি অভিনব ব্যবহার করছি।

Answer 5

এটি আমার পক্ষে সত্যই ভাল কাজ করেছে ....

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

আপনি যখন স্ক্রোলিং লক করতে যাচ্ছেন তখন যা ঠিক সিদ্ধান্ত নিয়ে ঠিক সেই দুটি লাইন কোডটি মোড়ানো।

যেমন

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

Comments

এটি সবার মধ্যে এটিই সেরা উত্তর

— জাফো

Answer 6

আপনি স্ক্রোল ইভেন্টটি অক্ষম করতে পারবেন না, তবে আপনি সম্পর্কিত ক্রিয়াকলাপগুলি অক্ষম করতে পারবেন যা মাউসওহিল এবং টাচমোভের মতো স্ক্রোলের দিকে নিয়ে যায়:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

Answer 7

আপনি এতে শরীরের স্ক্রোলবারটি আড়াল করতে overflow: hiddenএবং একই সাথে একটি মার্জিন সেট করতে পারেন যাতে সামগ্রীটি লাফিয়ে না যায়:

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

এবং তারপরে শূন্যস্থান পূরণ করতে আপনি পৃষ্ঠায় একটি অক্ষম স্ক্রোলবার যুক্ত করতে পারেন:

textarea {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 11px;
  outline: none;
  resize: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

<textarea></textarea>

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

Comments

আমি আসলে এই পদ্ধতিটি সবচেয়ে ভাল পছন্দ করি। খুব সাধারণ এবং দুর্দান্ত কাজ করে। ধন্যবাদ!

— dericcain

Answer 8

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

এটি আইই তে কিছুটা ঝাপটায়, তবে ফায়ারফক্স / ক্রোমে আকর্ষণীয় কাজ করে।

var body = $("body"),
  overlay = $("#overlay"),
  overlayShown = false,
  overlayScrollListener = null,
  overlaySavedScrollTop = 0,
  overlaySavedScrollLeft = 0;

function showOverlay() {
  overlayShown = true;

  // Show overlay
  overlay.addClass("overlay-shown");

  // Save scroll position
  overlaySavedScrollTop = body.scrollTop();
  overlaySavedScrollLeft = body.scrollLeft();

  // Listen for scroll event
  overlayScrollListener = body.scroll(function() {
    // Scroll back to saved position
    body.scrollTop(overlaySavedScrollTop);
    body.scrollLeft(overlaySavedScrollLeft);
  });
}

function hideOverlay() {
  overlayShown = false;

  // Hide overlay
  overlay.removeClass("overlay-shown");

  // Turn scroll listener off
  if (overlayScrollListener) {
    overlayScrollListener.off();
    overlayScrollListener = null;
  }
}

// Click toggles overlay
$(window).click(function() {
  if (!overlayShown) {
    showOverlay();
  } else {
    hideOverlay();
  }
});

/* Required */
html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
html { overflow: hidden; }
body { overflow-y: scroll; }

/* Just for looks */
.spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); }
.overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; }
.overlay .spacer { background: linear-gradient(#88f, #0ff); }
.overlay-shown { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Top of page</h1>
<p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p>
<div class="spacer"></div>
<h1>Bottom of page</h1>
<div id="overlay" class="overlay">
  <h1>Top of overlay</h1>
  <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p>
  <div class="spacer"></div>
  <h1>Bottom of overlay</h1>
</div>

Comments

সত্যই কাজ করে তবে স্থির শিরোনামের ক্ষেত্রে নকশাকে কলঙ্কিত করে, যেমন স্ক্রোলবারটি এর নীচে ডাইভ করে।

— লিওন উইলেনস

@ লিওন উইলেনস আপনার অর্থ কী তা আমি নিশ্চিত নই। আপনি আস্তরণ একটি নির্দিষ্ট শিরোলেখের নীচে প্রকাশমান নিয়ে চিন্তিত থাকেন, তাহলে আপনি সমন্বয় করতে হবে z-indexএর .overlay-shownসংশোধন করা হয়েছে হেডার তার চেয়ে অনেক বেশী হতে হবে। (একটি স্থির

— শিরোনামযুক্ত

না, আমি bodyট্যাগের স্ক্রোলবার সম্পর্কে বলছিলাম । আমি গতকাল আপনার কোডটি নিয়ে পরীক্ষা নিরীক্ষা করেছি এবং আমার পৃষ্ঠার শীর্ষে আমার একটি স্থির শিরোনাম রয়েছে। যদি আমি bodyট্যাগের মাধ্যমে স্ক্রোলিং পরিচালনা করি তবে স্ক্রোলবারটি স্থির শিরোনামের অধীনে থাকবে।

— লিওন উইলেনস

@ লিওনভিলেনস ওফস, দেখে মনে হচ্ছে যে আমি এটি কোনও সময়ে উত্পাদনে ঠিক করেছি এবং এটি আপডেট করতে ভুলে গেছি। দেখে মনে হচ্ছে এর পরিবর্তে $("body")আমরা ব্যবহার করছি $(window)। এবং z-index: -1এটি আড়াল করার জন্য ওভারলে এর পরিবর্তে আপনি ব্যবহার করতে পারেন visibility: hiddenবা অনুরূপ করতে পারেন । দ্রুত পরীক্ষার জন্য এটি কার্যকর হয় কিনা তা দেখতে jsfiddle.net/8p2gfeha দেখুন । স্থির শিরোনাম আর স্ক্রোলবারের উপরে উপস্থিত হয় না। আমি শেষ পর্যন্ত এই পরিবর্তনগুলি উত্তরের সাথে যুক্ত করার চেষ্টা করব।

— বি 10011

একটি যাদুমন্ত্র মত কাজ করে! আপনাকে ধন্যবাদ :)

— লিওন উইলেনস

Answer 9

আমার একইরকম সমস্যা ছিল: বাম-হাতের মেনুটি যখন এটি প্রদর্শিত হয় তখন স্ক্রোলিং প্রতিরোধ করে। উচ্চতা 100vh এ সেট করা মাত্রই, স্ক্রোলবার অদৃশ্য হয়ে গেল এবং সামগ্রীটি ডানদিকে ঝাঁকুনি দিল।

সুতরাং আপনি যদি স্ক্রোলবারটি সক্ষম করে রাখতে আপত্তি করেন না (তবে উইন্ডোটি পুরো উচ্চতায় স্থাপন করা যাতে এটি আসলে কোথাও স্ক্রোল করে না) তবে অন্য সম্ভাবনাটি একটি নীচের নীচের মার্জিনটি সেট করে যা স্ক্রোল বারগুলি দেখিয়ে রাখবে:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

Comments

overflow:hiddenমার্জিন কোনও প্রভাব ফেলতে বাধা দেয় না ?

— কোজা

Answer 10

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

আসল স্ক্রোল অবস্থান চিহ্নিত করে দেখানোর আগে:

var scroll = [$(document).scrollTop(),$(document).scrollLeft()];
//show your lightbox and then reapply scroll position
$(document).scrollTop(scroll[0]).scrollLeft(scroll[1]);

এটি কাজ করা উচিত

Answer 11

অপরিশোধিত তবে কার্যনির্বাহী উপায় হ'ল স্ক্রোলটিকে উপরের দিকে ফিরিয়ে দেওয়া, এইভাবে কার্যকরভাবে স্ক্রোলিং অক্ষম করা:

var _stopScroll = false;
window.onload = function(event) {
    document.onscroll = function(ev) {
        if (_stopScroll) {
            document.body.scrollTop = "0px";
        }
    }
};

আপনি যখন লাইটবক্সটি খুলবেন পতাকাটি উত্থাপন করুন এবং এটি বন্ধ করার সময়, পতাকাটি নীচে নামান।

লাইভ টেস্ট কেস ।

Answer 12

আমি "ওভারফ্লো: লুকানো" পদ্ধতিতে লেগে থাকতে চাই এবং কেবল স্ক্রোলবার প্রস্থের সমান প্যাডিং-ডান যুক্ত করব।

লাস্টসোর্স দ্বারা স্ক্রোলবার প্রস্থের ফাংশন পান ।

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

ওভারলেটি দেখানোর সময়, এইচটিএমএলে "নসক্রোল" শ্রেণি যুক্ত করুন এবং দেহে প্যাডিং-ডান যুক্ত করুন:

$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");

লুকানোর সময়, ক্লাস এবং প্যাডিং সরান:

$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);

ন্যাসক্রোল শৈলীটি কেবল এটি:

.noscroll { overflow: hidden; }

মনে রাখবেন যে পজিশনের সাথে যদি আপনার কোনও উপাদান থাকে: স্থির থাকে তবে আপনাকে সেই উপাদানগুলিতেও প্যাডিং যুক্ত করতে হবে।

Comments

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

— নওয়াজম্বেলা

Answer 13

<div id="lightbox">ভিতরে <body>উপাদান, এইভাবে যখন আপনি লাইটবক্স স্ক্রল আপনার কাছে শরীর স্ক্রোল করুন। সমাধানটি হ'ল <body>উপাদানটি 100% এর বেশি না করা , লম্বা সামগ্রী অন্য divউপাদানটির ভিতরে রাখা এবং যদি এই divউপাদানটির সাথে প্রয়োজন হয় তবে একটি স্ক্রোলবার যুক্ত করা overflow: auto।

html {
  height: 100%
}
body {
  margin: 0;
  height: 100%
}
#content {
  height: 100%;
  overflow: auto;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<html>
  <body>
    <div id="content">much content</div>
    <div id="lightbox">lightbox<div>
  </body>
</html>

এখন, লাইটবক্সে স্ক্রোলিং (এবং bodyপাশাপাশি) এর কোনও প্রভাব নেই, কারণ শরীরটি স্ক্রিনের উচ্চতার 100% এর বেশি নয়।

Answer 14

সমস্ত মডেল / লাইটবক্স জাভাস্ক্রিপ্ট-ভিত্তিক সিস্টেমগুলি এইচটিএমএল ট্যাগ বা বডি ট্যাগে, মডেল / লাইটবক্স প্রদর্শন করার সময় একটি ওভারফ্লো ব্যবহার করে।

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

বিকাশকারীরা যারা ম্যাকে কাজ করেন, তারা স্ক্রোলবারের সমস্যাটি দেখেন না।

স্ক্রোলবার অপসারণের মডেলের অধীনে লিখিত সামগ্রীটি পিছলে না যেতে কেবল কোনও আনসেট দ্বারা লুকানো প্রতিস্থাপন করুন।

লাইটবক্স খোলা / শো:

<html style="overflow: unset;"></html>

লাইটবক্স বন্ধ / লুকান:

<html style="overflow: auto;"></html>

Answer 15

ওভারলেয়ারের নীচে পৃষ্ঠাটি যদি শীর্ষে "স্থির" করা যায়, আপনি ওভারলে খুললে আপনি সেট করতে পারেন

.disableScroll { position: fixed; overflow-y:scroll }

এই বর্গটি স্ক্রোলযোগ্য শরীরে সরবরাহ করুন, আপনার এখনও সঠিক স্ক্রোলবারটি দেখতে পাওয়া উচিত তবে সামগ্রীটি স্ক্রোলযোগ্য নয়।

পৃষ্ঠার অবস্থান বজায় রাখতে jquery এ এটি করুন

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

আপনি যখন ওভারলেটি বন্ধ করেন কেবল তখন এই বৈশিষ্ট্যগুলি সাথে ফিরিয়ে দিন

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

আমি কেবল এই পথে প্রস্তাব রেখেছি কারণ আপনার কোনও স্ক্রোল ইভেন্ট পরিবর্তন করার দরকার নেই

Answer 16

এটি স্ক্রোল অবস্থানটি সংরক্ষণ করে এবং এটিকে স্ক্রোলিং সক্ষম করে পুনরুদ্ধার করে শীর্ষে উঠে যাওয়া ভিউপোর্টকে থামিয়ে দেবে।

সিএসএস

.no-scroll{
  position: fixed; 
  width:100%;
  min-height:100vh;
  top:0;
  left:0;
  overflow-y:scroll!important;
}

জাতীয়

var scrollTopPostion = 0;

function scroll_pause(){
  scrollTopPostion = $(window).scrollTop();
  $("body").addClass("no-scroll").css({"top":-1*scrollTopPostion+"px"});
}

function scroll_resume(){
  $("body").removeClass("no-scroll").removeAttr("style");
  $(window).scrollTop(scrollTopPostion);
}

এখন আপনাকে যা করতে হবে তা হ'ল ফাংশনগুলি কল করা

$(document).on("click","#DISABLEelementID",function(){
   scroll_pause();
});

$(document).on("click","#ENABLEelementID",function(){
   scroll_resume();
});

Answer 17

আপনি এটি জাভাস্ক্রিপ্ট দিয়ে করতে পারেন:

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

এবং আপনার লাইটবক্সটি বন্ধ হয়ে গেলে এটি অক্ষম করুন।

তবে যদি আপনার লাইটবক্সে কোনও স্ক্রোল বার থাকে তবে আপনি এটি খোলার সময় স্ক্রোল করতে পারবেন না। এটি কারণ এবং windowউভয়ই রয়েছে । সুতরাং আপনাকে নিম্নলিখিতগুলির মতো একটি স্থাপত্য ব্যবহার করতে হবে:body#lightbox

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

এবং তারপরে onscrollকেবল ইভেন্টটি প্রয়োগ করুন #global।