क्षैतिज स्क्रॉल को बंद करें [बंद]

Question

ठीक है किसी कारण से मेरा वेबपेज बाईं से दाईं ओर स्क्रॉल करता है और बहुत अधिक बदसूरत स्थान दिखाता है।

मैंने परिणामों की खोज की है लेकिन उन्होंने सिर्फ स्क्रॉलबार HIDDEN बनाया है

यही अब मैं चाहता हूं, मैं क्षैतिज स्क्रॉल सुविधा को शारीरिक रूप से अक्षम करना चाहता हूं । मैं नहीं चाहता कि उपयोगकर्ता मेरे पृष्ठ पर दाएँ से बाएँ और नीचे स्क्रॉल कर सके!

मैंने कोशिश की है: overflow-x:hiddenअपने htmlटैग पर css में लेकिन इसने केवल स्क्रॉलबार को छिपाया और स्क्रॉल को अक्षम नहीं किया।

कृपया मेरी मदद करें!

यहाँ पृष्ठ का लिंक दिया गया है: http://www.green-panda.com/usd309bands/ (टूटा हुआ लिंक)

यह आपको एक बेहतर विचार दे सकता है कि मैं किस बारे में बात कर रहा हूं:

यह तब होता है जब पहले पृष्ठ लोड होते हैं:

और इसके बाद मैं दाईं ओर स्क्रॉल करता हूं:

Comments

यदि कोई क्षैतिज स्क्रॉलबार नहीं है, तो आप क्षैतिज रूप से स्क्रॉल कैसे कर सकते हैं?

— फ्रोजन मटर की रोडी

माउस पर दो उंगलियां एक लैपटॉप पर दाएं से बाएं जा रही हैं।

— user2371301

जिज्ञासा से बाहर, आपके पेज पर एक डिफ़ॉल्ट स्क्रॉलबार क्या है?

— ट्रोजन

स्क्रॉलबार के बिना स्क्रॉल कैसे करें? मध्य-पहिया-क्लिक विंडोज पर खींचें।

— नायुकी

वहाँ एक ब्लॉक है कि को हटाने चौड़ाई 100% का विस्तार एक अच्छा अभ्यास हो जाएगा यानी अतिरिक्त गद्दी होने दिया जाएगा होना चाहिए

— दाने

Answer 1

इसे अपने सीएसएस में जोड़ने का प्रयास करें

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

Comments

वह महान काम किया। मुझे खुशी है कि मुझे कोई ऐसा मिला जो समझ गया कि मैं क्या कह रहा हूं! मैं जितनी जल्दी हो सके स्वीकार कर लूंगा।

— user2371301

Chrome 34 में यह वास्तव में स्क्रॉल करने से नहीं रोकता है। यह स्क्रॉलबार को छुपाता है, लेकिन मध्य-बटन स्क्रॉलिंग के साथ मैं अभी भी बाईं ओर छिपे हुए तत्वों को देख सकता हूं।

— gphilip

यह काम नहीं करता है जब आप ब्राउज़र विंडो को कम से कम क्षमता तक

— बढ़ाते हैं

: - / iPhone पर काम करना बंद करने के लिए टच / मोमेंटम स्क्रॉलिंग

— MarkWPiper

मैं आपको प्यार करता हूँ दोस्त!!

— रचस्व २

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

तो इसे ठीक करने के लिए, मैंने वही किया जो अन्य लोगों ने किया और क्षैतिज टूलबार छिपाने के लिए सीएसएस का उपयोग किया:

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

तब js में, मैंने स्क्रॉल करने के लिए एक इवेंट श्रोता बनाया, और उपयोगकर्ताओं को क्षैतिज स्क्रॉल करने का प्रयास किया।

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

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

मैंने देखा कि कोई ऐसा ही कुछ करता है, लेकिन जाहिर है कि यह काम नहीं किया। हालांकि यह मेरे लिए पूरी तरह से ठीक काम कर रहा है।

Comments

यह मेरे लिए काम करता है; हालाँकि स्वाइप करने पर मोबाइल में घबराहट होती है; जबकि गति धीमी हो जाती है।

— मुश्किल से

"ठीक से" काफी नहीं है, लेकिन अभी भी एक अच्छा और रचनात्मक जवाब है।

— फेदरक्रॉन

Answer 4

मुझे पता है कि बहुत देर हो चुकी है , लेकिन जावास्क्रिप्ट में एक दृष्टिकोण है जो आपको डायन का पता लगाने में मदद कर सकता है html तत्व क्षैतिज अतिप्रवाह का कारण बन रहा है -> स्क्रॉलबार प्रकट होने के लिए

यहाँ सीएसएस ट्रिक्स पर पोस्ट का लिंक दिया गया है

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

एक साइट नोट के रूप में, बाउंडिंगक्लायंट रेक्टविडथ की तुलना में अधिक सटीक है: - developer.mozilla.org/en-US/docs/Web/API/Element/… - stackoverflow.com/questions/43538059/…

— फुल

पूर्ण जीवन रक्षक!

— पूंछ

Answer 5

सभी बॉडी के लिए सिर्फ बॉडी के लिए चौड़ाई-स्क्रॉलिंग को अक्षम करने के लिए इसे आज़माएं body{overflow-x: hidden;}

Answer 6

koala_dev ने उत्तर दिया कि यह काम करेगा:

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

और MarkWPiper टिप्पणी करता है कि ": - / iPhone पर काम करने से रोकने के लिए स्पर्श / गति स्क्रॉल"

IPhone पर टच / मोमेंटम रखने का उपाय html, body के लिए css ब्लॉक के अंदर इस लाइन को जोड़ना है:

    height:auto!important;

Comments

इसे कहाँ रखा जाए? छोटे स्क्रीन के लिए बॉडी टैग या मीडिया क्वेरी के तहत?

— उमैर

@ धन्यवाद धन्यवाद - संपादित टिप्पणी स्पष्ट करने के लिए कि ऊंचाई: ऑटो लाइन html, बॉडी सीएसएस ब्लॉक में जाती है।

— 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

Thx, मुझे शिक्षा बहुत पसंद थी।

— पिंप ट्राइज़किट

Answer 8

यदि आप संपूर्ण स्क्रीन चौड़ाई पर क्षैतिज स्क्रॉलिंग को अक्षम करना चाहते हैं, तो इस कोड का उपयोग करें।

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

यह "100%" से बेहतर काम करता है क्योंकि यह मूल चौड़ाई को अनदेखा करता है और इसके बजाय व्यूपोर्ट का उपयोग करता है।

Answer 9

आप हमारे html पेज में इस विधि को आजमा सकते हैं।

पहला तरीका

body { overflow-x:hidden; }

दूसरा तरीका आप अपने सीएसएस बॉडी टैग में निम्नलिखित का उपयोग कर सकते हैं:

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

जो आपके स्क्रॉलबार को हटा देगा।

तीसरा तरीका

body { min-width: 1167px; }

5 वाँ रास्ता

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

6 वाँ रास्ता

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); } } );

अब im के बारे में और अधिक खोज .. !!!!

Answer 10

मुझे बस खुद से निपटना था। आखिरकार मुझे यह तरीका सबसे आसान और उपयोगी लगा। बस जोड़ दो

overflow-x: hidden;

अपने बाहरी माता-पिता को। मेरे मामले में यह इस तरह दिखता है:

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

आपको उपयोग करना होगा overflow-xक्योंकि यदि आप बस उपयोग overflowकरते हैं तो आप ऊर्ध्वाधर स्क्रॉलिंग को भी अक्षम करते हैं, अर्थात्overflow-y

यदि ऊर्ध्वाधर स्क्रॉलिंग अभी भी अक्षम है, तो आप इसे स्पष्ट रूप से सक्षम कर सकते हैं:

overflow-y: scroll;

मुझे पता है कि इसका उचित तरीका नहीं है क्योंकि अगर सब कुछ ठीक हो जाता है तो इस त्वरित और गंदे तरीके का उपयोग नहीं करना होगा।

Answer 11

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

आप उपरोक्त शैली लागू करते हैं या आप उस समस्या को हल करने के लिए javaScript में फ़ंक्शन बना सकते हैं

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

मैं इसे बाहर की कोशिश करने जा रहा हूं, सीएसएस फिक्स मेरे प्रोजेक्ट पर काम नहीं करता है, यह भी काम नहीं करता है :(

— लियोन गबन

यह मेरे लिए काम नहीं करता है

— सौहेल बेन स्लीमेन