কীভাবে অস্থায়ীভাবে স্ক্রোলিং অক্ষম করবেন?

Question

আমি স্ক্রোলটো jQuery প্লাগইন ব্যবহার করছি এবং এটি জানতে চাই যে জাভাস্ক্রিপ্টের মাধ্যমে উইন্ডো উপাদানটিতে অস্থায়ীভাবে স্ক্রোলিং অক্ষম করা সম্ভব কিনা? আমি যেহেতু স্ক্রোলিং অক্ষম করতে চাই তা হ'ল আপনি যখন স্ক্রোলটি অ্যানিমেট করার সময় স্ক্রোল করেন তখন তা সত্যিই কুৎসিত হয়;)

অবশ্যই, আমি একটি করতে পেরেছিলাম $("body").css("overflow", "hidden");এবং তারপরে অ্যানিমেশনটি বন্ধ হয়ে গেলে এটিকে আবার অটোতে রেখে দিতে পারি, তবে স্ক্রোলবারটি এখনও দৃশ্যমান তবে নিষ্ক্রিয় থাকলে এটি আরও ভাল।

Comments

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

— মার্কাস হোয়ব্রো

আরেকটি সমাধান: stackoverflow.com/questions/9280258/...

— gdbj

Answer 1

scrollইভেন্টটি বাতিল করা যাবে না। তবে আপনি এই ইন্টারঅ্যাকশন ইভেন্টগুলি বাতিল করে এটি করতে পারেন :
মাউস এবং টাচ স্ক্রোল এবং স্ক্রোলিংয়ের সাথে যুক্ত বোতামগুলি ।

[ ওয়ার্কিং ডেমো ]

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

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

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

আপডেট: নিষ্ক্রিয় শ্রোতাদের সাথে স্থির ক্রোম ডেস্কটপ এবং আধুনিক মোবাইল ব্রাউজারগুলি

Comments

এই ফাঁদে আটকে থাকা অন্যান্য ডেভসের জন্য পরামর্শ: নিশ্চিত করুন যে আপনি যে কোনও এবং সমস্ত 'e.stopPropagation ()' কলটি অন্যান্য jQuery থেকে স্ক্রোলিং বন্ধ করার প্রচেষ্টা থেকে সরিয়েছেন, কারণ এটি কেবল কাজ করে না, এটি ইভেন্টটিকে এই কোডটিতে বুদবুদ হওয়া থেকে বাধা দেয় ts যে কাজ করে। আশা করি আমার নষ্ট 30 মিনিট অন্য কারও সময় বাঁচাতে সহায়তা করবে :)

— ডার্ক ভ্যান বার্জেন

আপনি অক্ষম কীগুলি অ্যারেতে 32 (স্থান) যুক্ত করতে পারেন (কোড মন্তব্যে দেখান)।

— gblazex

আমি এটি সর্বদা করার মতো করে স্ক্রোল করতে পারি: মিডল বোতাম টিপুন এবং মাউসটি সরিয়ে ফেলুন ... সুতরাং এই কৌশলটি আমার মতো ব্যবহারকারীদের উপর প্রভাব ফেলবে না;)

— ডেনিস ভি

স্ক্রোলবারটি অক্ষম নয়।

— verism

এটি ক্রোমে আর কাজ করে না

— পেরিরিরসিটারল

Answer 2

শরীরে ক্লাস যুক্ত করে এটি করুন:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

আপনি IE, FF, সাফারি এবং ক্রোমে পরীক্ষিত স্ক্রোলিংটিকে পুনরায় সক্ষম করতে চাইলে ক্লাস যুক্ত করুন।

$('body').addClass('stop-scrolling')

---

জন্য মোবাইল ডিভাইসের , আপনি হ্যান্ডেল করতে হবে touchmoveইভেন্ট:

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

এবং স্ক্রোলিংটিকে পুনরায় সক্ষম করতে আনবাইন্ড করুন। আইওএস 6 এবং অ্যান্ড্রয়েড 2.3.3 এ পরীক্ষিত

$('body').unbind('touchmove')

Comments

বুঝেছি! আপনি touchmoveযেমন ইভেন্টটি পরিচালনা করতে হবে $('body').bind('touchmove', function(e){e.preventDefault()})। এই মোবাইল সমাধানটি অন্তর্ভুক্ত করার জন্য এই উত্তরটি সম্পাদনা করেছে।

— MusikAnimal

শীতল, কেবল কোনও অভ্যন্তরীণ স্ক্রোলিং টাচ ডিভাইসের মডেলে কাজ করতে পারে তা নিশ্চিত করতে হবে। কেবলমাত্র মডেলের নীচে ওভারলে করতে পারে এবং শরীরের পরিবর্তে ওভারলে ডিফল্ট টাচমোভকে আটকাতে পারে।

— হলডম

এই সমাধানটি কাজ করার সময় এটির পৃষ্ঠার শীর্ষে ফিরে স্ক্রোলিংয়ের (সম্ভাব্য) অনাকাঙ্ক্ষিত প্রভাব রয়েছে।

— ম্যাট

আমার নির্বাচক না থাকলে এটি আমার পক্ষে কাজ করে না$('body,html')

— পিক ইয়োরপুইজন

এই সমাধানটি কাজ করে তবে স্ক্রোল বারটি অদৃশ্য হয়ে যায় এবং যখন আপনি এই ক্লাসটি শরীরে প্রয়োগ করেন (উদাহরণস্বরূপ)

— জর্জিও

Answer 3

এটি করার জন্য এখানে একটি আসল প্রাথমিক উপায়:

window.onscroll = function () { window.scrollTo(0, 0); };

এটি আই 6 এ এক ধরণের ঝাঁপিয়ে পড়েছে।

Comments

সত্যই কোনও অক্ষম নয়, যখন স্ক্রোলটি চেষ্টা করা হয় তখন ডিফল্ট হিসাবে স্ন্যাপের মতো।

— মার্কাস হোয়ব্রো

@ মার্কাসটি যতটা বাতিল এমন একটি ইভেন্টের সাথে পেতে যাচ্ছেন ঠিক ততটাই ভাল।

— sdleihssirhc

যদিও এটি বাস্তবের জন্য এটি অক্ষম করে না, এটি এটি অনুকরণ করে এবং এটি আমার পক্ষে যথেষ্ট ভাল।

— ক্রিস বিয়ার

আইএমএইচও - সেরা উত্তর এখানে। এছাড়াও, আপনাকে এটিকে লক করতে হবে না (0, 0), কেবলমাত্র বর্তমান স্ক্রোল অবস্থানটি ব্যবহার করুন।

— ইয়ামসালাত 20'15

তবে কীভাবে আমরা এটি পুনরায় চালু করতে পারি?

— সাইবারনেটিক

Answer 4

নিম্নলিখিত সমাধানটি মৌলিক তবে খাঁটি জাভাস্ক্রিপ্ট (কোনও jQuery নয়):

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

Comments

সাফারি .1.১ এবং আই.আই ১১ এ জঞ্জি New নতুন Chrome, ফায়ারফক্স, অপেরা ঠিক আছে।

— টিমো কাহকেনেন

এখনও নতুন Chrome এ একটি সামান্য বিট

— ঝাঁপিয়ে পড়ে

ঠিকঠাক কাজ করছে, সাফারিতে, ক্রোম, তবে আইআই-তে ফ্লিকার হয়েছে

— ভুবন অরোরা

যদি এই সমাধানটি কোনও ব্রাউজারের জন্য কাজ না করে, তবে তা ব্রাউজারগুলির সমস্যা

— ওটো শ্যাভাদজে

অন্য উত্তরে উল্লিখিত হিসাবে, scroll-behavior: smoothএটিকে বর্স করে। এছাড়াও, আমি ওটো এর সাথে একমত নই যে এটি ব্রাউজারের দোষ। আপনি মূলত ধারণা করছেন যে বাস্তবে এটি অ্যাসিক্রোনাস হলে তত্ক্ষণাত্ ঘটবে

— ম্যাট ফ্লেচার

Answer 5

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

এটি গালামবালাজের উত্তরের উপর ভিত্তি করে , তবে স্পর্শ ডিভাইসের জন্য সমর্থন সহ, এবং জিকিউরি প্লাগইন র‌্যাপার সহ একক বস্তু হিসাবে রিফ্যাক্টর।

এখানে ডেমো।

এখানে গিথুব।

/**
 * $.disablescroll
 * Author: Josh Harrison - aloof.co
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */

;(function($) {

    "use strict";

    var instance, proto;

    function UserScrollDisabler($container, options) {
        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);

        this.$container = $container;
        this.$document = $(document);
        this.lockToScrollPos = [0, 0];

        this.disable();
    }

    proto = UserScrollDisabler.prototype;

    proto.disable = function() {
        var t = this;

        t.lockToScrollPos = [
            t.$container.scrollLeft(),
            t.$container.scrollTop()
        ];

        t.$container.on(
            "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
            t._handleWheel
        );

        t.$container.on("scroll.disablescroll", function() {
            t._handleScrollbar.call(t);
        });

        if(t.opts.handleKeys) {
            t.$document.on("keydown.disablescroll", function(event) {
                t._handleKeydown.call(t, event);
            });
        }
    };

    proto.undo = function() {
        var t = this;
        t.$container.off(".disablescroll");
        if(t.opts.handleKeys) {
            t.$document.off(".disablescroll");
        }
    };

    proto._handleWheel = function(event) {
        event.preventDefault();
    };

    proto._handleScrollbar = function() {
        this.$container.scrollLeft(this.lockToScrollPos[0]);
        this.$container.scrollTop(this.lockToScrollPos[1]);
    };

    proto._handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };


    // Plugin wrapper for object
    $.fn.disablescroll = function(method) {

        // If calling for the first time, instantiate the object and save
        // reference. The plugin can therefore only be instantiated once per
        // page. You can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method);
        }

        // Instance already created, and a method is being explicitly called,
        // e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }

    };

    // Global access
    window.UserScrollDisabler = UserScrollDisabler;

})(jQuery);

Comments

খুশী এটা কার্যকর। এনবি আমি jQuery প্লাগইন ফর্ম্যাটে এর একটি লিঙ্ক সহ সম্পাদনা করেছি ।

— জোশ হ্যারিসন

নিষ্ক্রিয় স্ক্রোল বোতামটি আসলে কাজ করলে সাহায্য করতে পারে

— ক্যামেরনজোনসভেব

@ ব্যবহারকারী1672694, এটি ক্রোমে এখানে কাজ করে। আপনার ব্রাউজারটি কী এবং কোন ডেমো পৃষ্ঠায় আপনি বাগটি খুঁজে পেয়েছেন? কনসোলে কোনও জেএস ত্রুটি?

— জোশ হ্যারিসন

ক্রোমে (38, উইন্ডোজ 7), আমি এখনও ক্লিক করে মিডল বোতামটি ধরে রেখে, পরে টেনে স্ক্রোল করতে পারি।

— শেঠি 11

দয়া করে উপেক্ষা করুন, আমি দেখতে পেয়েছি যে এটি বাঁধাই mousewheelএকটি

— মোহন

Answer 6

আমি একটি পুরানো পোস্টের উত্তর দিতে দুঃখিত, কিন্তু আমি একটি সমাধান খুঁজছিলাম এবং এই প্রশ্ন জুড়ে এসেছি।

এই ইস্যুটির জন্য এখনও স্ক্রোলবারটি প্রদর্শন করতে অনেকগুলি কার্যকারিতা রয়েছে, যেমন ধারকটিকে 100% উচ্চতা এবং overflow-y: scrollস্টাইলিং দেওয়া giving

আমার ক্ষেত্রে আমি কেবল একটি স্ক্রোলবার দিয়ে একটি ডিভ তৈরি করেছি যা আমি overflow: hiddenশরীরে যুক্ত করার সময় প্রদর্শন করি :

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

উপাদান স্ক্রোলবারে অবশ্যই এই স্টাইলগুলি থাকতে পারে:

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

এটি একটি ধূসর স্ক্রোলবার দেখায়, আশা করি এটি ভবিষ্যতের দর্শকদের সহায়তা করবে।

Answer 7

আমি এই সমস্যার সমাধান খুঁজছিলাম কিন্তু উপরের যে কোনও সমাধানের সাথে সন্তুষ্ট নই ( এই উত্তরটি লেখার ক্ষেত্রে ), তাই আমি এই সমাধানটি নিয়ে এসেছি ..

সিএসএস

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}

জাতীয়

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}

Comments

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

— অ্যান্ড্রু মাইনার

Answer 8

গালাম্বলজ পোস্ট অনুসারে আমি টাচ ডিভাইসের জন্য সমর্থন যোগ করব, আমাদের স্পর্শ করতে দিয়েছি তবে কোনও উপরে বা নীচে স্ক্রোল করতে পারবেন না:

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}

function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

Comments

আপনি কি নিশ্চিত যে এটি একটি উত্তর অন্য উত্তরের মন্তব্য নয়?

— ইভান এইচ

Answer 9

ক্রোম 56 এবং অন্যান্য আধুনিক ব্রাউজারে থেকে আপনি যোগ আছে passive:falseকরতে addEventListenerকরতে ডাকুন preventDefaultহবে। তাই আমি মোবাইলে স্ক্রোলিং বন্ধ করতে এটি ব্যবহার করি:

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

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

Answer 10

না, আমি ইভেন্ট হ্যান্ডলিংয়ের সাথে যাব না কারণ:

• সমস্ত ঘটনা শরীরে পৌঁছানোর গ্যারান্টিযুক্ত নয়,

• পাঠ্য নির্বাচন করা এবং নীচের দিকে সরানো আসলে দস্তাবেজটিকে স্ক্রল করে,

• ইভেন্টের বিচ্ছিন্নতার পর্যায়ে যদি sth ভুল হয়ে যায় তবে আপনি বিনষ্ট হন।

আমি একটি লুকানো টেক্সারিয়ার সাথে একটি অনুলিপি তৈরি করে এই কামড় দিয়েছি এবং অনুমান করি যে, যখনই আমি অনুলিপি করব পৃষ্ঠাটি স্ক্রোল করুন কারণ আমি কল করার আগে অভ্যন্তরীণভাবে আমাকে টেক্সারিয়া নির্বাচন করতে হবে document.execCommand('copy')।

যাইহোক আমি যে পথে যাই সেদিকে খেয়াল করুন setTimeout():

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

স্ক্রোলবারগুলি মুহূর্তের জন্য অদৃশ্য হয়ে যাওয়ার সাথে সাথে একটি গতিময় ফ্ল্যাশিং উপস্থিত রয়েছে তবে এটি আমি গ্রহণযোগ্য acceptable

Answer 11

মুছে ফেলা স্ক্রোল দিয়ে আপনি কী অর্জন করতে চান তার উপর নির্ভর করে আপনি যে উপাদানটি স্ক্রোলটি সরিয়ে ফেলতে চান তা কেবল ঠিক করতে পারেন (ক্লিক করতে বা অন্য যে কোনও ট্রিগার আপনি অস্থায়ীভাবে স্ক্রোলকে নিষ্ক্রিয় করতে চান)

আমি প্রায় একটি "টেম্প নো স্ক্রোল" সমাধান এবং আমার প্রয়োজনগুলির জন্য অনুসন্ধান করছিলাম, এটি এটি সমাধান করেছে

একটি ক্লাস করা

.fixed{
    position: fixed;
}

তারপরে জ্যাকুরির সাথে

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

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

বিঃদ্রঃ! আপনার "কন্টেন্ট কনটেনার" উপাদান স্থাপনের উপর নির্ভর করে আপনার এটি বাম থেকে সামঞ্জস্য করতে হতে পারে। যা নির্দিষ্ট শ্রেণীর সক্রিয় থাকাকালীন সেই উপাদানটিতে সিএসএস বাম মান যুক্ত করে সহজেই করা যায়

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

Answer 12

আরেকটি সমাধান:

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

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

আমার পপআপ / মডেলটি দেখানোর জন্য এটি দুটি ফাংশন:

var popup_bodyTop = 0;
var popup_bodyLeft = 0;

function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');

    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();

    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;

    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}

function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

ফলাফল: স্ক্রোলযোগ্য নয় এমন পটভূমি এবং বাম স্ক্রোলবারের কারণে সামগ্রীটির পুনরায় অবস্থান নেই। বর্তমান এফএফ, ক্রোম এবং আইই 10 এর সাথে পরীক্ষিত।

Comments

এটি আমার এবং পজিশনটি ব্যবহারের পরে শীর্ষে স্ক্রোলিংয়ের সমস্যাটির জন্য কাজ করেছে: স্থির। ধন্যবাদ!

— আননিয়া মার্টিনেজ

Answer 13

এ কেমন? (আপনি যদি jQuery ব্যবহার করছেন)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

Comments

কিছুটা ঝাপটায়, তবে এটি আই 7 এর জন্য কাজ করে (ক্লায়েন্ট এটি ব্যবহার করে)। অন্যান্য সমাধান না।

— নিকি বি

Answer 14

মাধ্যমিক পৃষ্ঠাটি মডেল ডায়ালগ হিসাবে দেখানোর জন্য আমি শোমোডালডায়ালগ ব্যবহার করছি ।

প্রধান উইন্ডো স্ক্রোলবারগুলি গোপন করতে:

document.body.style.overflow = "hidden";

এবং মোডাল ডায়ালগ বন্ধ করার সময়, প্রধান উইন্ডো স্ক্রোলবারগুলি দেখায়:

document.body.style.overflow = "scroll";

ডায়লগ থেকে মূল উইন্ডোতে উপাদান অ্যাক্সেস করতে:

parent.document.getElementById('dialog-close').click();

কেবল শোমোডাল ডায়ালগ সম্পর্কে অনুসন্ধান করা যে কোনও ব্যক্তির জন্য : (মূল কোডের লাইন 29 এর পরে)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

Comments

এটি আমার জন্য প্রতিক্রিয়াতে কাজ করেছিল যেখানে jQuery অস্তিত্ব নেই এবং যেখানে প্রতিক্রিয়ার বডি ট্যাগের স্থিতি পরিচালনা করতে অ্যাক্সেস নেই।

— জন

Answer 15

গ্রহণযোগ্য উত্তরের মতো ইভেন্টটিকে বাতিল করা আমার মতে একটি ভয়াবহ পদ্ধতি: /

পরিবর্তে আমি position: fixed; top: -scrollTop();নীচে ব্যবহার ।

ডেমো: https://jsfiddle.net/w9w9hthy/5/

আমার jQuery পপআপ প্রকল্প থেকে: https://github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

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

সম্ভাব্য সমস্যাগুলি উপরের কোড সহ সমাধান করা হয়েছে:

• প্রস্থ, অবস্থান স্থির করার সময় এইচটিএমএল উপাদানগুলির প্রস্থটি 100% এর চেয়ে কম হতে পারে
• উচ্চতা, উপরে হিসাবে একই
• স্ক্রোলবার, অবস্থান স্থির করার সময় পৃষ্ঠার সামগ্রীতে আর একটি স্ক্রোলবার থাকে না এমনকি যখন এটি অনুভূমিক পেজজ্যাম্পের ফলে আগে স্ক্রোলবার থাকে when
• পেজজ্যাম্প, অবস্থান স্থির করার সময় পৃষ্ঠা স্ক্রোলটপ উল্লম্ব পৃষ্ঠাজম্পের ফলে কার্যকর হয় না

উপরের পৃষ্ঠার ফ্রিজ / আনফ্রিজে কোডের কারও যদি কোনও উন্নতি হয় তবে আমাকে তা জানান যাতে আমি আমার প্রকল্পে এই উন্নতিগুলি যুক্ত করতে পারি।

Answer 16

var winX = null, winY = null;
window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});
function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
};
function enableWindowScroll() {
    winX = null;
    winY = null;
};

Comments

এটি এখানে সেরা সমাধান।

— jfunk

@ জ্যাফঙ্ক সম্মত, সহজ এবং সংক্ষিপ্ত, ছোট কোড, নিখুঁত। আপনাকে ধন্যবাদ

— ফ্লোরেন্ট রোকেস

Answer 17

আমার একই সমস্যা রয়েছে, নীচে আমি এটি পরিচালনা করি handle

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

এই সাহায্য আশা করি।

Answer 18

শেয়েন ফোর্বসের উত্তরের ভিত্তিতে বিল্ডিং, এবং একটি আমি এখানে fcalderan এর মাধ্যমে পেয়েছি: কেবল এটি স্ক্রোলটি লুকান না করে অক্ষম করুন? এবং হলডমের ইস্যুটি স্ক্রোলবার অদৃশ্য হয়ে যাওয়ার জন্য

সিএসএস:

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

জাতীয়:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

এই কোডটি আপনাকে পৃষ্ঠার শীর্ষে পৌঁছে দেবে, তবে আমি মনে করি যে fcalderan কোড একটি workaround আছে।

Answer 19

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

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

আমি যখন আমার ওভারলেটিকে স্ক্রিনে স্লাইড করা শুরু করি, তখন আমি তা করি:

$('body').addClass('stop-scrolling').css('margin-right', 8);

এবং আমি আমার ওভারলেটি স্ক্রিনটি স্লাইড করার পরে:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

গুরুত্বপূর্ণ: এটি পুরোপুরি কাজ করে কারণ আমার ওভারলেটি অবস্থিত absolute, right: 0pxকখন visible।

Answer 20

সবচেয়ে সহজ পদ্ধতিটি হ'ল:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

এটিকে পূর্বাবস্থায় ফেরাতে:

$("body").css("overflow", "auto");

কার্যকর করা সহজ, তবে একমাত্র নিম্নতরটি হ'ল:

• কেন্দ্রটি বিন্যস্ত থাকলে (অনুভূমিকভাবে) পৃষ্ঠায় কিছুটা বাম দিকে ঝাঁপ হবে।

এটি স্ক্রোল বারটি সরানো এবং ভিউপোর্টটি কিছুটা প্রশস্ত হওয়ার কারণে।

Comments

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

— অ্যাঞ্জেল ডেভিড ক্যাল্ডেরারো প্যাকিয়ট

@ অ্যাঞ্জেলড্যাভিডক্যালার্ডেরো প্যাকিয়োট নং, স্ক্রোলের অবস্থান একই উচ্চতা / দূরত্ব থেকে যাবে।

— দান

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

— টম

@ টম আমি কেবল এটি যাচাই করেছি, এটি কেবলমাত্র কিছু উপলক্ষে এটি করা হয় (যখন শরীরের উচ্চতা তার বাচ্চাদের সাথে সম্পর্কিত না হয়)। পরিবর্তন চেষ্টা করুন bodyথেকে htmlপরিবর্তে।

— দান

আমি বাজি ধরছি আপনি আইফোনে আপনার সমাধানটি পরীক্ষা করে দেখেননি কারণ overflow:hiddenসেখানে কাজ করে না

— শুভ

Answer 21

স্ক্রোলটি বন্ধ করার জন্য আমার সমাধানটি এখানে রয়েছে (jQuery নয়)। পাশের মেনুটি উপস্থিত হলে আমি স্ক্রোলটি অক্ষম করতে এটি ব্যবহার করি।

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>

<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

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

এই কলমে সবাই মিলে।

Answer 22

টাচ ডিভাইসে আমার একই সমস্যা রয়েছে। উপাদানটিতে "টাচ-অ্যাকশন: কিছুই নয়" যুক্ত করা সমস্যার সমাধান করেছে।

আরও তথ্যের জন্য. এটা দেখ:-

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Answer 23

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

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

সুতরাং আমরা এখানে ...

প্রথমে ভেরিয়েবল তৈরি করতে দিন যা আপনাকে জানাতে দেবে যে পপআপটি খোলা আছে এবং এটিকে স্টপ উইন্ডোস্ক্রোল বলবে । যদি আমরা এটি না করি তবে আপনি আপনার পৃষ্ঠায় একটি অপরিজ্ঞাত ভেরিয়েবলের একটি ত্রুটি পাবেন এবং এটি 0 তে সেট করবেন - সক্রিয় নয়।

$(document).ready(function(){
    stopWindowScroll = 0;
});

এখন আসুন ওপেন পপআপ ফাংশন ডাইনিটি আপনার কোডের যে কোনও ফাংশন হতে পারে যা আপনি প্লাগইন বা কাস্টম হিসাবে যে পপআপ ব্যবহার করছেন তা ট্রিগার করে। এই ক্ষেত্রে এটি ক্লিক ফাংশনে একটি সাধারণ দস্তাবেজ সহ একটি সাধারণ কাস্টম পপআপ হবে।

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

সুতরাং আমরা পরবর্তী কাজটি হ'ল নিকট পপআপ ফাংশন তৈরি করব, যা আমি আবারও পুনরাবৃত্তি করব যে কোনও ফাংশন আপনি ইতিমধ্যে তৈরি করেছেন বা একটি প্লাগইনে ব্যবহার করছেন। গুরুত্বপূর্ণ বিষয়টি হ'ল স্টপ উইন্ডোস্ক্রোল ভেরিয়েবলটি কখন খোলা হয় বা বন্ধ হয় তা 1 বা 0 এ সেট করতে আমাদের সেই 2 টি ফাংশন প্রয়োজন ।

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

তারপরে উইন্ডো.স্রোল ফাংশনটি তৈরি করতে দেয় যাতে উপরে বর্ণিত স্টপ উইন্ডোস্ক্রোলটি 1 - এ সক্রিয় হিসাবে সেট হয়ে গেলে আমরা স্ক্রোলিংটিকে রোধ করতে পারি ।

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

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

এখানে জেএসফিডেলের একটি কার্যকারী উদাহরণ:

জেএস ফিডল উদাহরণ

এই সাহায্য যদি আমাকে জানতে দিন। শুভেচ্ছা।

Answer 24

গ্লোবাল ভেরিয়েবলে স্ক্রোলের দৈর্ঘ্য সঞ্চয় করুন এবং যখন প্রয়োজন হবে তখন এটি পুনরুদ্ধার করুন!

var sctollTop_length = 0;

function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}

function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}

Answer 25

এই কোডটি ক্রোম 56 এ এবং আরও কাজ করবে (আসল উত্তরটি আর Chrome এ কাজ করে না)।

ব্যবহার DomUtils.enableScroll()স্ক্রোলিং সক্ষম করতে ।

DomUtils.disableScroll()স্ক্রোলিং অক্ষম করতে ব্যবহার করুন ।

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }

  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }

  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }

  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}

Answer 26

লাফ ঠেকাতে, আমি এটিই ব্যবহার করেছি

export function toggleBodyScroll(disable) {
  if (!window.tempScrollTop) {
    window.tempScrollTop = window.pageYOffset; 
    // save the current position in a global variable so I can access again later

  }
  if (disable) {
    document.body.classList.add('disable-scroll');
    document.body.style.top = `-${window.tempScrollTop}px`;
  } else {
    document.body.classList.remove('disable-scroll');
    document.body.style.top = `0px`;
    window.scrollTo({top: window.tempScrollTop});
    window.tempScrollTop = 0;
  }
}

এবং আমার সিএসএসে

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Answer 27

আমি এই উত্তরটি অন্য সাইটে পেয়েছি :

স্ক্রোলটি অক্ষম করুন:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

বন্ধ পপআপ রিলিজ স্ক্রোল পরে:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

Comments

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

— মার্কাসোফটওয়্যার

এই 'ইভেন্টগুলি' টাচ স্ক্রোলিংয়ের জন্য, আপনার যে কোনও ইভেন্টের প্রয়োজন কেবল বিকল্পে করুন।

— পেনস্টম্প

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

— মার্কাসফল্টওয়্যার

Answer 28

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

var events = {
  preventDefault: function(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;  
  },

  //spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
  //left: 37, up: 38, right: 39, down: 40
  keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
  keydown: function(e) {
    for (var i = events.keys.length; i--;) {
      if (e.keyCode === events.keys[i]) {
        events.preventDefault(e);
        return;
      }
    }
  },

  wheel: function(e) {
    events.preventDefault(e);
  },

  disable: function() {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = events.wheel;
    document.onkeydown = helpers.events.keydown;
  },

  enable: function() {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }
}

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

function setMouseEvents(canvas) {
  var useCapture = false;

  //Mouse enter event
  canvas.addEventListener('mouseenter', function(event) {
    events.disable();
  }, useCapture);

  //Mouse leave event
  canvas.addEventListener('mouseleave', function(event) {
    events.enable();
  }, useCapture);
}

আপনি এই হ্যাক দিয়ে ডান ক্লিক মেনু অক্ষম করতে পারে:

function disableRightClickMenu(canvas) {
  var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
  my_gradient.addColorStop(0, "white");
  my_gradient.addColorStop(1, "white");
  canvas.context.fillStyle = my_gradient;
  canvas.context.fillRect(0, 0, canvas.width, canvas.height);
  canvas.oncontextmenu = function() { return false; };
}

Answer 29

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

এই পদ্ধতির মূল যুক্তি : উইন্ডোটির স্ক্রোল অবস্থানটি মূল স্ক্রোল অবস্থানে সেট করার টাইমারটি jquery অ্যানিমেট কমান্ডের আগে শুরু করা উচিত এবং তারপরে অ্যানিমেশনটি শেষ হলে আমাদের এই টাইমারটি সাফ করা দরকার ( original scroll positionঅ্যানিমেশন শুরুর ঠিক আগে অবস্থানটি)।

আমি আমার মনোরম আশ্চর্য দেখতে পেলাম যে টাইমার ব্যবধানটি যদি টাইমার ব্যবধানে ঘটেছিল তবে ডকুমেন্টটি অ্যানিমেশন সময়কালে আসলে অচল ছিল 1 millisecond।

//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
    window.scrollTo(xPosition, yPosition);
}, 1);

//animate the element emt
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //when animation completes, we stop the timer
    clearInterval(restoreTimer);
});

অন্য কোন সমাধান যা কাজ করেছে : স্ক্রোলিং সক্ষম / অক্ষম করার জন্য এই পোস্টের অধীনে মোহাম্মদ অনিনির উত্তরের উপর ভিত্তি করে আমিও দেখতে পেয়েছি যে নীচের মত কোডের একটি পরিবর্তিত সংস্করণ কাজ করেছে।

//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//disable scrolling
window.onscroll = function() {
    window.scrollTo(xPosition, yPosition);
};

//animate and enable scrolling when animation is completed
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //enable scrolling when animation is done
    window.onscroll = function() {};
});

Answer 30

একটি সহজ সমাধান যা আমার পক্ষে কাজ করেছিল (অস্থায়ীভাবে উইন্ডো স্ক্রোলিং অক্ষম করে)।

এই ঝাঁকুনির উপর ভিত্তি করে: http://jsfiddle.net/dh834zgw/1/

নিম্নলিখিত স্নিপেট (jquery ব্যবহার করে) উইন্ডো স্ক্রোলটি অক্ষম করবে:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

এবং আপনার সিএসএসে:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

এখন আপনি যখন মডেলটি সরিয়ে ফেলবেন, এইচটিএমএল ট্যাগে ন্যাসক্রোল ক্লাসটি সরাতে ভুলবেন না:

$('html').toggleClass('noscroll');