অনুভূমিক স্ক্রোল অক্ষম করুন [বন্ধ]

Question

ঠিক আছে কোনও কারণে আমার ওয়েবপৃষ্ঠাটি বাম থেকে ডানে স্ক্রোল করে এবং প্রচুর কুৎসিত স্থান দেখায়।

আমি ফলাফলগুলি অনুসন্ধান করেছি তবে তারা কেবল স্ক্রোলবারটি লুকিয়ে রেখেছে

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

আমি চেষ্টা করেছি: overflow-x:hiddenআমার htmlট্যাগে সিএসএসে তবে এটি কেবল স্ক্রোলবারকে গোপন করে এবং স্ক্রোলটি অক্ষম করে না।

আমাকে সাহায্য করুন!

এই পৃষ্ঠার লিঙ্কটি এখানে: http://www.green-panda.com/usd309bands/ (ভাঙা লিঙ্ক)

আমি আপনাকে কী বলছি তার থেকে এটি আপনাকে আরও ভাল ধারণা দিতে পারে:

প্রথম পৃষ্ঠাগুলি যখন লোড হয় এটি তখন:

আমি ডানদিকে স্ক্রোল করার পরে এটি হল:

Comments

অনুভূমিক স্ক্রোলবার না থাকলে আপনি কীভাবে অনুভূমিকভাবে স্ক্রোল করতে পারেন?

— ফ্রোজেন মটর রডির

মাউসের দুটি আঙুল একটি ল্যাপটপে বাম থেকে ডান দিকে যাচ্ছে।

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

কৌতূহলের বাইরে, আপনার পৃষ্ঠায় কী একটি ডিফল্ট স্ক্রোলবার তৈরি করে?

— ট্রোজান

একটি স্ক্রোলবার ছাড়া স্ক্রোল কিভাবে? উইন্ডোতে মিডিল-হুইল-ক্লিকের টানুন।

— নায়ুকি

অবশ্যই একটি ব্লক থাকতে হবে যা অতিরিক্ত প্যাডিং করবে অর্থাৎ 100% প্রস্থকে অপসারণ করা উত্তম অভ্যাস হবে

— র‌্যাশ

Answer 1

এটি আপনার সিএসএসে যুক্ত করার চেষ্টা করুন

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Comments

এটা দুর্দান্ত কাজ করেছে। আমি খুশি যে আমি এমন কাউকে খুঁজে পেয়েছি যা আমি বলছিলাম! আমি যত তাড়াতাড়ি সম্ভব গ্রহণ করব।

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

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

— gphilip

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

— dspacejs

: - / আইফোনে কাজ বন্ধ করার জন্য স্পর্শ / গতির স্ক্রোলিংয়ের কারণ

— মার্কডব্লিউপার

আমি তোমাকে ভালবাসি দোস্ত !!

— rochasdv

Answer 2

এটি আপনার কোডের কদর্য শিশু :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

এটি দিয়ে প্রতিস্থাপন

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

Answer 3

সুতরাং এটি সঠিকভাবে সমাধানের জন্য, আমি অন্যরা যা করেছি তা করেছি এবং অনুভূমিক সরঞ্জামদণ্ডটি আড়াল করার জন্য CSS ব্যবহার করেছি:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

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

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

আমি কাউকে একই রকম কিছু করতে দেখেছি, তবে দৃশ্যত এটি কার্যকর হয়নি। এটি তবে আমার জন্য পুরোপুরি সূক্ষ্ম কাজ করছে।

Comments

এটি আমার পক্ষে কাজ করে; তবে সোয়াইপ করার সময় মোবাইলে একটি জিটর রয়েছে; গতি ধীর হয়ে যায় যখন।

— হার্ডি নোটিসেবল

"সঠিকভাবে" বেশ না, তবে এখনও একটি ভাল এবং সৃজনশীল উত্তর।

— ফেদারক্রাউন

Answer 4

আমি জানি অনেক দেরি হয়ে গেছে , তবে জাভাস্ক্রিপ্টে এমন একটি পদ্ধতির সাহায্য পেয়েছে যা আপনাকে ডাইন এইচটিএমএল উপাদান সনাক্ত করতে সহায়তা করতে পারে যা অনুভূমিক ওভারফ্লো -> স্ক্রোলবারটি প্রদর্শিত হতে পারে

সিএসএস ট্রিকসে পোস্টের লিঙ্কটি এখানে

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

এটি এমন কিছু ফিরে আসতে পারে:

<div class="div-with-extra-width">...</div>

তারপরে আপনি কেবল অতিরিক্ত থেকে প্রস্থটি সরিয়ে ফেলুন div বা সেট করুনmax-width:100%

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

এটি আমার জন্য সমস্যার সমাধান করেছে:]

Comments

একটি সাইট নোট হিসাবে, boundingClientRect offsetWidth চেয়ে বেশি সুনির্দিষ্ট: - developer.mozilla.org/en-US/docs/Web/API/Element/... - stackoverflow.com/questions/43537559/...

— ফুল

পরম জীবন রক্ষাকারী!

— লেজ

Answer 5

কেবলমাত্র শরীরের জন্য প্রস্থ-স্ক্রোলিং অক্ষম করার জন্য এটি ব্যবহার করে দেখুন সমস্ত ডকুমেন্ট হ'ল দেহ body{overflow-x: hidden;}

Answer 6

কোয়ালা_দেব জবাব দিয়েছিলেন যে এটি কাজ করবে:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

এবং মার্কডব্লিউপার মন্তব্য করেছেন যে ": - / আইফোনে কাজ করা বন্ধ করার জন্য স্পর্শ / গতিবেগ স্ক্রোলিং"

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

    height:auto!important;

Comments

এটা কোথায় রাখব? শরীরের ট্যাগের অধীনে বা ছোট পর্দার জন্য একটি মিডিয়া ক্যোয়ারী?

— উমাইর

@ উমাইর ধন্যবাদ - সম্পাদনা করা মন্তব্যটি পরিষ্কার করার জন্য যে উচ্চতা: অটো লাইন এইচটিএমএল, বডি সিএসএস ব্লকে যায়।

— ffffff

উচ্চতার জন্য আপনাকে অনেক ধন্যবাদ: অটো সমাধান!

— তোড়বেন

Answer 7

কোয়ালা_দেবের উত্তরটি কার্যকর হবে, তবে আপনি যদি ভাবছেন যে এটি কেন এটি কার্যকর হয়:

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.     

।

Comments

থেক্স, আমি পড়াশোনা পছন্দ করেছিলাম।

— পিম্প ট্রাইজকিট

Answer 8

আপনি যদি পুরো পর্দার প্রস্থে অনুভূমিক স্ক্রোলিং অক্ষম করতে চান তবে এই কোডটি ব্যবহার করুন।

element {
  max-width: 100vw;
  overflow-x: hidden;
}

এটি "100%" এর চেয়ে ভাল কাজ করে কারণ এটি প্যারেন্ট প্রস্থকে উপেক্ষা করে পরিবর্তে ভিউপোর্ট ব্যবহার করে।

Answer 9

আপনি আমাদের এইচটিএমএল পৃষ্ঠায় এই সমস্ত পদ্ধতি ব্যবহার করতে পারেন ..

1 ম উপায়

body { overflow-x:hidden; }

২ য় উপায় আপনি নিজের সিএসএস বডি ট্যাগটিতে নিম্নলিখিতগুলি ব্যবহার করতে পারেন:

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

এটি আপনার স্ক্রোলবারটি সরিয়ে ফেলবে।

3 য় উপায়

body { min-width: 1167px; }

5 ম উপায়

html, body { max-width: 100%; overflow-x: hidden; }

6th ষ্ঠ উপায়

element { max-width: 100vw; overflow-x: hidden; }

চতুর্থ উপায় ..

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

এখন আমি আরও অনুসন্ধান করছি .. !!!!

Answer 10

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

overflow-x: hidden;

আপনার বাইরের পিতামাতার কাছে To আমার ক্ষেত্রে এটি দেখতে এমন দেখাচ্ছে:

<body style="overflow-x: hidden;">

আপনাকে ব্যবহার করতে হবে overflow-xকারণ আপনি যদি সহজভাবে ব্যবহার করেনoverflow তবে উল্লম্ব স্ক্রোলিংটিও অক্ষম করুনoverflow-y

উল্লম্ব স্ক্রোলিংটি এখনও অক্ষম থাকলে আপনি এটিকে স্পষ্টভাবে সক্ষম করতে পারবেন:

overflow-y: scroll;

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

Answer 11

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

আপনি উপরের স্টাইলটি প্রয়োগ করুন বা আপনি এই সমস্যাটি সমাধান করতে জাভাস্ক্রিপ্টে ফাংশন তৈরি করতে পারেন

Answer 12

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

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

আমি এটি করার পরামর্শ দিচ্ছি না কারণ এটি ছোট পর্দার ব্যবহারকারীদের জন্য কার্যকারিতা সীমাবদ্ধ করে।

Comments

আমি এটি চেষ্টা করে যাচ্ছি, সিএসএস ফিক্সটি আমার প্রকল্পে কাজ করে না, এমনকি

— এটিও

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

— সোহেল বেন স্লিমেন