ব্রাউজারগুলি উল্লম্ব এবং অনুভূমিক স্ক্রোলবারগুলি অক্ষম করুন


117

ব্রাউজারগুলি jQuery বা জাভাস্ক্রিপ্ট ব্যবহার করে উল্লম্ব এবং অনুভূমিক স্ক্রোলবারগুলি অক্ষম করা সম্ভব?


আমি কিছু পরিস্থিতিতে মনে বিশেষভাবে যদি আপনি স্ক্রল এবং কোন স্ক্রল এই সমাধান আরো বাঞ্ছনীয় মধ্যে টগল করতে চাই: stackoverflow.com/questions/8701754/...
ইউসুফ Salimpour

আপনি আরো একটি সম্পূর্ণ এই প্রশ্নের এখানে উত্তর খুঁজে পেতে পারেন stackoverflow.com/a/25561646/1922144
davidcondrey

উত্তর:


144

আপনি যদি স্ক্রোলবারগুলি গতিশীলভাবে ব্যবহার করতে পারেন তবে লুকানোর এবং প্রদর্শন করার সম্ভাবনা প্রয়োজন

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

এবং

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

কোথাও আপনার কোড।


4
ওভারফ্লো লুকানো সবসময় আইই তে কাজ করে না। নীচে অ্যান্টনিডব্লু জোন্স উত্তর দেখুন।
টিয়াগো আলমেইদা

4
oveflow: hiddenস্মার্টফোনে কোনও কিছুই রোধ করবে না।
dvlden

ক্রোম, এই অক্ষম স্ক্রলবার এটা গোপন ছাড়া (এটা এখনও আছে এবং এখনও অন্য সব কিছুর আকার পরিবর্তন, কিন্তু এখন তার ধূসর)
taltamir

121
function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

5
দুটি আপভোট একমাত্র খাঁটি জাভাস্ক্রিপ্ট উত্তর হওয়ায় উল্লেখযোগ্যভাবে সামান্য।
এফজেএস 2

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

এটি আমার জন্য একমাত্র সমাধান যা কাজ করেছিল, যেহেতু দেহ লুকানো ওভারফ্লো পুরো ডকুমেন্টকে আক্রমণ করে না, এই সমস্যাটির সঠিক সমাধান এটি! অনেক অনেক ধন্যবাদ, আপনি আমাকে অনেক সময় বাঁচিয়েছেন!
Adnane.T

এটি একটি উজ্জ্বল সমাধান এবং একটি উত্সাহের দাবিদার। এটি স্থির সিএসএস সহ সমস্যা সমাধান করে, যেখানে পৃষ্ঠায় শীর্ষে স্ক্রোল হবে be
হাইফ্যাম

50

সিএসএস চেষ্টা করুন

<body style="overflow: hidden">

15
ব্রাউজারের সামঞ্জস্যের জন্য আমি এই স্টাইলটি এইচটিএমএল ট্যাগেও যুক্ত করব: এইচটিএমএল, বডি {ওভারফ্লো: লুকানো;}
অ্যাডি

32

এখনও অবধি আমাদের ওভারফ্লো হয়েছে: দেহে লুকানো। তবে আইই সর্বদা এটি সম্মান করে না এবং আপনার শরীরের উপাদানগুলিতে পাশাপাশি স্ক্রল = "না" লাগাতে হবে এবং / অথবা ওভারফ্লো স্থাপন করতে হবে: এইচটিএমএল উপাদানটিতেও লুকানো রয়েছে।

আপনি যখন ভিউ পোর্টটির 'নিয়ন্ত্রণ নিতে' প্রয়োজন তখন আপনি এটি আরও নিতে পারেন: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

দেহে 100% উচ্চতা মঞ্জুর করা একটি উপাদানের উইন্ডো ভিউপোর্টের পুরো উচ্চতা থাকে এবং নীচের অংশটি ব্যবহার করে উপাদানটি একেবারে অবস্থান: এনএনপিএক্স উইন্ডোটির নীচের প্রান্তের উপরে এনএন পিক্সেল ইত্যাদি সেট করা হবে etc.


2
দেহ CSS তে ',' হওয়া উচিত ';' না?
paynestrike

12

সিএসএস চেষ্টা করুন।

আপনি যদি অনুভূমিক অপসারণ করতে চান

overflow-x: hidden;

এবং আপনি যদি উল্লম্ব অপসারণ করতে চান

overflow-y: hidden;

10

আইই এর আধুনিক সংস্করণগুলিতে (আইই 10 এবং তারপরের), স্ক্রোলবারগুলি -ms-overflow-styleসম্পত্তি ব্যবহার করে লুকানো যেতে পারে ।

html {
     -ms-overflow-style: none;
}

ক্রোমে স্ক্রোলবারগুলি স্টাইল করা যেতে পারে:

::-webkit-scrollbar {
    display: none;
}

আপনি একটি ওয়েব অ্যাপ্লিকেশন, যা যথেষ্ট যতো তাড়াতাড়ি হয় 'ডিফল্ট' শরীর স্ক্রলিং ব্যবহার করতে চান তাহলে এটি খুবই উপকারী overflow-y: scroll


সমস্ত উত্তর থেকে এটিই আমার পক্ষে কাজ করেছে :) ধন্যবাদ!
গেদিমিনাস

9

আপনার যদি ইন্টারনেট এক্সপ্লোরার 6 এর জন্যও সমর্থন প্রয়োজন তবে কেবল এইচটিএমএলকে উপচে পড়ুন

$("html").css("overflow", "hidden");

এবং

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

5

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

overflow-x: hidden;
overflow-y:scroll;

এবং উল্লম্ব আড়াল করতে:

overflow-y: hidden;
overflow-x: scroll;


4

(আমি এখনও মন্তব্য করতে পারি না, তবে এটি ভাগ করে নিতে চাই):

ল্যান্সির কোডটি আমার জন্য ডেস্কটপ ব্রাউজারে কাজ করেছিল। তবে আইপ্যাডে (ক্রোম, আইওএস 9) এটি অ্যাপ্লিকেশনটিকে ক্র্যাশ করেছে। এটি ঠিক করার জন্য, আমি পরিবর্তন করেছি

document.documentElement.style.overflow = ...

প্রতি

document.body.style.overflow = ...

যা আমার সমস্যার সমাধান করেছে।


2

কারণ ফায়ারফক্স একটি তীর কী কমিয়ে দিয়েছেন, আপনি সম্ভবত একটি লাগাতে চান <div>সিএসএস শৈলী সঙ্গে এটি প্রায়: overflow:hidden;


2

JQuery ব্যবহার করে আপনি এই কোড দিয়ে স্ক্রোলিং বারটি অক্ষম করতে পারেন:

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

এছাড়াও আপনি এই কোড দিয়ে এটি আবার সক্ষম করতে পারেন:

 $('body').unbind('mousewheel');
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.