স্ক্রলিং শিশু ডিভ উইন্ডো স্ক্রল করে, আমি কীভাবে এটি থামাব?

Question 1

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

Question 2

আপনি এর মতো কিছু করে পুরো পৃষ্ঠার স্ক্রোলিং নিষ্ক্রিয় করতে পারেন:

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>

Question 3

সমাধান খুঁজে পেয়েছি।

http://jsbin.com/itajok

এই আমার প্রয়োজন ছিল।

এবং এই কোড।

http://jsbin.com/itajok/edit#javascript,html

একটি jQuery প্লাগ-ইন ব্যবহার করে।

অবহেলা বিজ্ঞপ্তির কারণে আপডেট

থেকে jQuery-mousewheel :

ইভেন্ট হ্যান্ডলারে তিনটি আর্গুমেন্ট ( delta, deltaXএবং deltaY) যুক্ত করার পুরানো আচরণটি এখন অবচয় করা হয়েছে এবং পরবর্তী প্রকাশে মুছে ফেলা হবে।

তারপরে, event.deltaYএখন অবশ্যই ব্যবহার করা উচিত:

var toolbox = $('#toolbox'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});

ডেমো

Question 4

নির্বাচিত সমাধানটি একটি শিল্পকর্ম। ভেবেছি এটি একটি প্লাগইন পাওয়ার যোগ্য ...

$.fn.scrollGuard = function() {
    return this
        .on( 'wheel', function ( e ) {
            var event = e.originalEvent;
            var d = event.wheelDelta || -event.detail;
            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
        });
};

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

হালনাগাদ

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

$.fn.scrollGuard2 = function() {
  return this
    .on( 'wheel', function ( e ) {
      var $this = $(this);
      if (e.originalEvent.deltaY < 0) {
        /* scrolling up */
        return ($this.scrollTop() > 0);
      } else {
        /* scrolling down */
        return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
      }
    })
  ;
};

ক্রোমে দুর্দান্ত কাজ করে এবং অন্যান্য সমাধানগুলির চেয়ে অনেক সহজ ... আমাকে অন্যত্র এটি কীভাবে ভাড়া দেওয়া যায় তা আমাকে জানান ...

ছোট ছোট

Question 5

আপনি বডি স্ক্রোলবারটি অক্ষম করতে ডিভের উপর একটি মাউসওভার ইভেন্ট এবং এটি আবার সক্রিয় করতে একটি মাউসআউট ইভেন্ট ব্যবহার করতে পারেন?

যেমন এইচটিএমএল

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
    content
</div>

এবং তারপর জাভাস্ক্রিপ্ট এর মত:

var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
    body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
    body.style.overflowY = 'auto';
}

Question 6

ওয়াই অক্ষে এটি করার একটি ক্রস-ব্রাউজারের উপায় এখানে, এটি ডেস্কটপ এবং মোবাইলে কাজ করে। ওএসএক্স এবং আইওএস-এ পরীক্ষিত।

var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var deltaY = event.deltaY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
}, {passive:false});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
}, {passive:false});

scrollArea.addEventListener("touchmove", function(event) {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var currentClientY = event.touches[0].clientY;
    var deltaY = this.previousClientY - currentClientY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
    this.previousClientY = currentClientY;
}, {passive:false});

Question 7

আমি এই ইস্যুটির জন্য সমাধান লিখেছি

  var div;
  div = document.getElementsByClassName('selector')[0];

  div.addEventListener('mousewheel', function(e) {
    if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
      e.preventDefault();
      div.scrollTop = div.scrollHeight;
    } else if (div.scrollTop + e.deltaY <= 0) {
      e.preventDefault();
      div.scrollTop = 0;
    }
  }, false);

Question 8

এখানে উত্তর হিসাবে , বেশিরভাগ আধুনিক ব্রাউজারগুলি overscroll-behavior: none;সিএসএস সম্পত্তি সমর্থন করে যা স্ক্রোল শৃঙ্খলা রোধ করে। আর এটাই, মাত্র একটি লাইন!

Question 9

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

এটি সম্ভবত নিম্নলিখিত পদ্ধতিতে কিছু মার্কআপ পরিবর্তন প্রয়োজন:

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div>

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

আরও দেখুন ব্রাউজারের প্রধান স্ক্রলবার একমাত্র একটি বিশেষ DIV আছে স্ক্রল ।

Question 10

আপনি যদি নির্বাচক উপাদানটি প্রবেশ করেন তবে এটি উইন্ডোতে স্ক্রোলিং অক্ষম করে। কবজ মত কাজ করে।

elements = $(".selector");

elements.on('mouseenter', function() {
    window.currentScrollTop = $(window).scrollTop();
    window.currentScrollLeft = $(window).scrollTop();
    $(window).on("scroll.prevent", function() {
        $(window).scrollTop(window.currentScrollTop);
        $(window).scrollLeft(window.currentScrollLeft);
    });
});

elements.on('mouseleave', function() {
    $(window).off("scroll.prevent");
});

Question 11

আপনি এর মতো কিছু করে পুরো পৃষ্ঠার স্ক্রোলিং নিষ্ক্রিয় করতে পারেন তবে স্ক্রোলবারটি প্রদর্শন করুন!

<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>

Question 12

$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
  var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
  var scrollTop = this.scrollTop;
  if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
    e.preventDefault();
  }
});

Question 13

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

jQuery.fn.scrollGuard = function() {
    this
        .addClass('scroll-guarding')
        .off('.scrollGuard').on('mouseenter.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g[0].myCst = $g.scrollTop();
            $g[0].myCsl = $g.scrollLeft();
            $g.off("scroll.prevent").on("scroll.prevent", function() {
                $g.scrollTop($g[0].myCst);
                $g.scrollLeft($g[0].myCsl);
            });
        })
        .on('mouseleave.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g.off("scroll.prevent");
        });
};

ব্যবহারের একটি সহজ উপায় হ'ল scroll-guardপৃষ্ঠায় থাকা সমস্ত উপাদানগুলিতে ক্লাস যুক্ত করা যা আপনি স্ক্রোলিংয়ের অনুমতি দেন। তারপরে $('.scroll-guard').scrollGuard()তাদের রক্ষা করতে ব্যবহার করুন।

Question 14

আপনি যদি কোনও overflow: hiddenস্টাইল প্রয়োগ করেন তবে এটি চলে যেতে হবে

সম্পাদনা: আসলে আমি আপনার প্রশ্নটি ভুলভাবে পড়েছি, এটি কেবল স্ক্রোল বারটি আড়াল করবে তবে আমি মনে করি না এটি আপনি যা খুঁজছেন।

Question 15

আমি ক্রোম এবং ফায়ারফক্সে কাজের জন্য কোনও উত্তর পেতে পারি না, তাই আমি এই সম্মিলনটি নিয়ে এসেছি:

$someElement.on('mousewheel DOMMouseScroll', scrollProtection);

function scrollProtection(event) {
    var $this = $(this);
    event = event.originalEvent;
    var direction = (event.wheelDelta * -1) || (event.detail);
    if (direction < 0) {
        if ($this.scrollTop() <= 0) {
            return false;
        }
    } else {
        if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
            return false;
        }
    }
}