it-swarm.dev

تعطيل التمرير الأفقي

حسنًا لسبب ما ، يتم تمرير صفحة الويب الخاصة بي من اليسار إلى اليمين وتظهر مساحة كبيرة قبيحة.

لقد بحثت عن نتائج لكنها جعلت شريط التمريرمخفيًا

هذا ما أريده الآن ، أريد فعليًاتعطيلميزة التمرير الأفقي. لا أريد أن يكون المستخدم قادرًا على التمرير من اليسار إلى اليمين على صفحتي لأعلى ولأسفل!

لقد جربت: overflow-x:hidden في css على علامتي html ، لكن ذلك جعل شريط التمرير مخفيًا فقط ولم يعطل التمرير.

من فضلك ساعدنى!

فيما يلي رابط للصفحة: http://www.green-panda.com/usd309bands/ (رابط معطل)

قد يعطيك هذا فكرة أفضل عما أتحدث عنه:

هذا عندما يتم تحميل الصفحات الأولى:

enter image description here

وهذا بعد التمرير إلى اليمين:

enter image description here

146
user2371301

حاول إضافة هذا إلى CSS الخاص بك

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

هذا هو الطفل سيئة من التعليمات البرمجية الخاصة بك :)

.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%;
}
12
Abdul Malik

لإصلاح هذا بشكل صحيح ، فعلت ما فعله الآخرون هنا واستخدمت css للحصول على إخفاء شريط الأدوات الأفقي:

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

ثم في js ، قمت بإنشاء مستمع أحداث للبحث عن التمرير ، وقمت بمقاومة المستخدمين الذين حاولوا التمرير الأفقي.

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

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

رأيت شخصًا يفعل شيئًا مشابهًا ، لكن يبدو أن ذلك لم ينجح. ولكن هذا يعمل بشكل جيد للغاية بالنسبة لي.

12
Dylan Cope

جرب هذا الخيار لتعطيل تمرير العرض للجسم فقط ، حيث أن المستند بالكامل هو النص body{overflow-x: hidden;}

5
easa

أعلم أنها أيضًا متأخرة ، ولكن هناك طريقة في جافا سكريبت يمكن أن تساعدك على اكتشاف عنصر html الساحر الذي يتسبب في حدوث تجاوز أفقي -> لتظهر

هنا رابط للنشر على CSS Tricks

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%

أتمنى أن يساعدك هذا!

تم إصلاح المشكلة بالنسبة لي:]

5
MoolsBytheway

أجاب koala_dev أن هذا سيعمل:

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

وتعلّق MarkWPiper على ما يلي: "//تسبب في تحرك اللمس/الزخم لإيقاف العمل على iPhone"

يكمن الحل للحفاظ على اللمس/الزخم على iPhone في إضافة هذا السطر داخل كتلة css لـ html والجسم:

    height:auto!important;
4
ffffff

إذا كنت ترغب في تعطيل التمرير الأفقي على عرض الشاشة بالكامل ، استخدم هذا الرمز.

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

هذا يعمل بشكل أفضل من "100٪" لأنه يتجاهل عرض الأصل ويستخدم بدلاً من ذلك منفذ العرض.

1
Fabian von Ellerts

ستنجح إجابة Koala_dev ، لكن في حال كنت تتساءل هذا هو السبب وراء نجاحها:

.
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.     

.

0
SchadeM

يمكنك تجاوز الحدث التمرير الأساسي باستخدام JavaScript ، وإعادة تعيين التمرير الأفقي إلى 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;
});

لا أنصح بذلك لأنه يحد من وظائف المستخدمين الذين لديهم شاشات صغيرة.

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

يمكنك تطبيق النمط أعلاه أو يمكنك إنشاء وظيفة في javaScript لحل هذه المشكلة

0
user8491101

كان علي فقط التعامل معها بنفسي. بعد كل هذا وجدت هذه الطريقة سهلة ومفيدة للغاية. فقط اضف

overflow-x: hidden;

إلى والدك الخارجي. في حالتي يبدو الأمر كما يلي:

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

يجب عليك استخدام overflow-x لأنه إذا كنت تستخدم ببساطة overflow ، فأنت تقوم بتعطيل التمرير العمودي أيضًا ، أي overflow-y

إذا كان التمرير العمودي لا يزال معطلاً ، يمكنك تمكينه بشكل صريح باستخدام:

overflow-y: scroll;

أعرف أنها ليست طريقة مناسبة إلى حد ما لأنه إذا كان كل شيء تم إعداده بشكل جيد فلن يضطر المرء إلى استخدام هذه الطريقة السريعة والقذرة.

0
The Fool