स्क्रॉलबार को वेब पेज को रीपोज़ करने से कैसे रोकें?

218

मेरे पास केंद्र से संरेखित DIV के साथ एक वेबसाइट है। अब, कुछ पृष्ठों को स्क्रॉल करने की आवश्यकता है, कुछ नहीं। जब मैं एक प्रकार से दूसरे स्थान पर जाता हूं, तो स्क्रॉलबार की उपस्थिति पृष्ठ को कुछ पिक्सेल की ओर ले जाती है। क्या प्रत्येक पृष्ठ पर स्क्रॉलबार को स्पष्ट रूप से दिखाए बिना इससे बचने का कोई तरीका है?

html css

— दिमित्री नेस्टरुक
स्रोत

6

overflow-y: overlayइस सूत्र में किसी का उल्लेख क्यों नहीं है ?

— दूधसरक

3

मोज़िला डॉक्स के अनुसार, overflow-y: overlayमूल्यह्रास किया जाता है: developer.mozilla.org/en-US/docs/Web/CSS/overflow

— drojf

266

ओवरफ्लो-वाई: स्क्रॉल सही है, लेकिन आपको इसका उपयोग html टैग के साथ करना चाहिए, न कि बॉडी के साथ या फिर आईई 7 में आपको डबल स्क्रॉलबार मिलेगा।
इसलिए सही सीएसएस होगा:

html {
  overflow-y: scroll;
}

— रूबेन
स्रोत

1

IE 10+ में एक फ्लोटिंग स्क्रॉलबार है, जिससे आपको इन ब्राउज़रों के लिए इसे निष्क्रिय कर देना चाहिए

— Ruben

1

फैंसीबॉक्स या ट्विटर बूटस्ट्रैप मोडल के साथ संयोजन में उपयोग करते समय यह डबल स्क्रोलबार जैसी समस्याएं पैदा कर सकता है

— रुबिन

अतिरिक्त जानकारी: ट्विटर बूटस्ट्रैप अब जोड़ता है। मोडल खुला होने पर आपके शरीर में मैडल-ओपन होता है

— रूबेन

55

वर्थ उल्लेख करते हुए कि यह स्थायी रूप से एक ऊर्ध्वाधर स्क्रॉलबार दिखाता है। हमेशा स्वीकार्य नहीं हो सकता।

— rustyx

मुझे क्रोमियम और फ़ायरफ़ॉक्स दोनों में एक डबल स्क्रॉलबार मिलता है। मैं फ्लेक्स-बॉक्स का उपयोग कर रहा हूं; शायद यही कारण है कि ...

— गैरेट

72

अपने स्क्रॉल करने योग्य तत्व की सामग्री को एक div में लपेटें और लागू करें padding-left: calc(100vw - 100%);।

<body>
    <div style="padding-left: calc(100vw - 100%);">
        Some Content that is higher than the user's screen
    </div>
</body>

चाल वह है 100vwजो स्क्रॉलबार सहित व्यूपोर्ट के 100% का प्रतिनिधित्व करता है। यदि आप घटाते हैं 100%, जो स्क्रॉलबार के बिना उपलब्ध स्थान है, तो आप स्क्रॉलबार की चौड़ाई के साथ समाप्त होते हैं या 0यदि यह मौजूद नहीं है। बाईं ओर उस चौड़ाई का एक पैडिंग बनाना दूसरी स्क्रॉलबार का अनुकरण करेगा, केंद्रित सामग्री को दाईं ओर स्थानांतरित करना।

कृपया ध्यान दें कि यह केवल तभी काम करेगा जब स्क्रॉल करने योग्य तत्व पृष्ठ की संपूर्ण चौड़ाई का उपयोग करता है, लेकिन यह अधिकतर समय कोई समस्या नहीं होनी चाहिए क्योंकि केवल कुछ अन्य मामले हैं जहां आपने स्क्रॉल करने योग्य सामग्री केंद्रित की है।

— राप्ती
स्रोत

1

एक इनलाइन शैली की तुलना में एक वर्ग के माध्यम से बेहतर तरीके से लागू किया जाएगा, और केवल इन ब्राउज़रों में काम करेगा , लेकिन यह एक चतुर तकनीक है - मुझे इसका एहसास नहीं था 100vwऔर 100%विभिन्न चीजों को मापा जाता है, इसलिए मैंने इससे कुछ उपयोगी सीखा है!

— निक एफ

21

यह बिल्कुल प्रतिभाशाली है और वास्तव में कैल्क के लिए ब्राउज़र समर्थन पर विचार करना सबसे अच्छा जवाब है।

— माइकल

1

आप बाईं ओर एक मार्जिन जोड़ने के बजाय एक ही कर सकते हैं, आप दाईं ओर एक नकारात्मक मार्जिन जोड़ते हैं (देखें stackoverflow.com/a/39289453/6015444 )।

— ताउनिउक

2

यह समाधान पृष्ठभूमि के रंग के साथ समान मुद्दों का कारण होगा जैसे उत्तर "चौड़ाई: कैल्क (100vw - 34px);" लेकिन बाईं ओर।

— मैकीज ल्यू

1

मैं इस शैली के कुछ मीडिया के प्रश्नों को जोड़ने के लिए सिफारिश करेंगे @media screen and (min-width: 800px) {...} । उन मामलों में जब सामग्री पृष्ठ की चौड़ाई के अनुरूप होगी। छोटे प्रस्तावों पर उदाहरण के लिए अनावश्यक अंतर होगा, सामग्री को दाईं ओर स्थानांतरित करना

— MarkosyanArtur

44

मुझे नहीं लगता। लेकिन स्टाइल के bodyसाथ overflow: scrollकरना चाहिए। आपको लगता है कि पता है, यद्यपि।

— माइकल क्रेलिन - हैकर
स्रोत

3

अच्छा लगता है ... पृष्ठ को हमेशा स्क्रॉलबार दिखाने के लिए बाध्य करें कि उसे इसकी आवश्यकता है या नहीं, ... तो पृष्ठ प्रकारों के बीच कोई दृश्य परिवर्तन नहीं है।

— ईडाईलोन सेप

1

हां, लेकिन IIRC, यह दोनों स्क्रॉलबार दिखाता है । मुझे वास्तव में क्षैतिज एक की आवश्यकता नहीं है।

— दिमित्री नेस्टरुक

यह सच है। लेकिन मैं आपकी मदद करने के लिए बहुत कुछ नहीं कर सकता :( वास्तव में, मैं केवल अपने उत्तर के पहले वाक्य को वास्तविक उत्तर

— मानता हूं

49

overflow-y: scroll:)

— Svish

2

निम्नलिखित बेहतर उत्तर है

— सामी

36

स्क्रॉल हमेशा दिखाए जाने के साथ, शायद लेआउट के लिए अच्छा नहीं है।

Css3 के साथ शरीर की चौड़ाई को सीमित करने का प्रयास करें

body {
    width: calc(100vw - 34px);
}

vwव्यूपोर्ट की चौड़ाई है ( कुछ स्पष्टीकरण के लिए इस लिंक को देखें )
calccss3 में गणना
34pxडबल स्क्रॉलबार चौड़ाई के लिए है ( इसे निश्चित आकार के लिए देखें या यदि आप निश्चित आकारों पर भरोसा नहीं करते हैं तो गणना करें )

— Moesio
स्रोत

4

जब तक किसी को ज़रूरत न हो तब तक सब कुछ व्यर्थ है।

— Moesio

3

यह नेत्रहीन बहुत कम घुसपैठ है केवल स्वीकार किए गए उत्तर विवरण की तरह स्कोलबार्स को मजबूर करने से।

— सिलास हेंसन

4

इसने मेरी अब तक की जरूरतों के लिए सबसे अच्छा काम किया है, मैंने padding-left: 34px;अपने पेज को समान रूप से केंद्र में भी जोड़ा है।

— पैट मिगलियाकियो

3

यह स्वीकृत उत्तर होना चाहिए, वर्तमान में स्वीकृत एक के विपरीत यह वास्तव में प्रश्न का उत्तर दे रहा है!

— Coz

2

यदि आपके पास बॉडी बैकग्राउंड या बॉटम बॉर्डर की तुलना में अलग-अलग रंग के साथ नेबर / हेडर हैं, तो यह समस्या पैदा करेगा

— ज़िया उल रहमान मुगल

28

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

उदाहरण है । "परिवर्तन मिनट ऊंचाई" बटन पर क्लिक करें।

साथ calc(100vw - 100%)हम स्क्रॉलबार की चौड़ाई की गणना कर सकते हैं (और अगर यह प्रदर्शित नहीं किया जाता है, यह 0 हो जाएगा)। विचार: नकारात्मक मार्जिन-सही का उपयोग करके, हम <html>इस चौड़ाई को बढ़ा सकते हैं । आपको एक क्षैतिज स्क्रॉल बार दिखाई देगा - इसका उपयोग करके छिपा होना चाहिए overflow-x: hidden।

— pongo
स्रोत

मुझे बॉडी को एक डिव में रखना था और डिव के लिए मार्जिन को लागू करना था ताकि वह काम कर सके ( राप्ती के जवाब के समान ।) लेकिन यह बहुत ही भद्दा लगता है।

— ताउनिउक

1

यह बढ़िया काम करता है और क्रोम या फ़ायरफ़ॉक्स में अवांछित क्षैतिज स्क्रॉलबार के परिणामस्वरूप नहीं लगता है। केवल calc(100% - 100vw)गुणा करने के बजाय इसका उपयोग क्यों नहीं किया जाता है -1?

— सिस्टमपारॉक्स

13

मुझे नहीं पता कि यह एक पुरानी पोस्ट है, लेकिन मुझे भी यही समस्या थी और यदि आप लंबवत स्क्रॉल करना चाहते हैं तो आपको केवल प्रयास करना चाहिए overflow-y:scroll

13

यदि आकार बदलना या कुछ डेटा लोड करने के बाद यह स्क्रॉल बार को जोड़ रहा है तो आप निम्नलिखित का प्रयास कर सकते हैं, वर्ग बना सकते हैं और इस वर्ग को लागू कर सकते हैं।

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}

— kunalkamble
स्रोत

3

मैंने अपनी वेबसाइट पर समस्या को स्पष्ट रूप से स्क्रॉलपोर्ट की चौड़ाई के व्यूपोर्ट आकार के द्वारा जावास्क्रिप्ट में शरीर की चौड़ाई निर्धारित करके हल किया है। मैं स्क्रॉलबार की चौड़ाई निर्धारित करने के लिए यहां प्रलेखित jQuery आधारित फ़ंक्शन का उपयोग करता हूं ।

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

— फ्रैंक एल
स्रोत

10

मैं यह भी बताना शुरू नहीं कर सकता कि यह इतना बुरा व्यवहार क्यों है।

— मिथोफैक्लेन

20

@BenHooper: मैं जानना चाहता हूं कि यह बुरा व्यवहार क्यों है।

— साद

1

यदि आप विंडो का आकार बदलते हैं तो क्या होता है?

— ब्रैडेन स्टेफनिएक

3

इसका उपयोग करते हुए उत्तर पर विस्तार:

body {
    width: calc(100vw - 17px);
}

एक टिप्पणीकार ने केंद्र को बनाए रखने के लिए बाएं-गद्दी को जोड़ने का सुझाव दिया:

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

लेकिन तब चीजें सही नहीं लगती हैं जब आपकी सामग्री व्यूपोर्ट से अधिक व्यापक हो। इसे ठीक करने के लिए, आप इस तरह से मीडिया प्रश्नों का उपयोग कर सकते हैं:

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

जहां 1058px = सामग्री चौड़ाई + 17 * 2

यह एक क्षैतिज स्क्रॉलबार को एक्स ओवरफ्लो को संभालने देता है और जब व्यूपोर्ट चौड़ा होता है तो आपकी सामग्री को केंद्रित करने के लिए केंद्रित सामग्री को केंद्रित रखता है

— ग्रेग सेंटऑनगे
स्रोत

3

के बंद का विस्तार राप्ती का जवाब , इस बस के रूप में अच्छी तरह से काम करना चाहिए, लेकिन यह के दाईं ओर अधिक मार्जिन कहते हैं bodyऔर नकारात्मक के साथ खाल यह htmlबजाय अतिरिक्त गद्दी है कि संभावित पृष्ठ के लेआउट को प्रभावित कर सकता है जोड़ने का, मार्जिन। इस तरह, वास्तविक पृष्ठ (ज्यादातर मामलों में) पर कुछ भी नहीं बदला गया है, और कोड अभी भी कार्यात्मक है।

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}

— ग्रांटीकैन
स्रोत

मैंने पाया कि क्रोम पर यह उन पृष्ठों पर एक क्षैतिज स्क्रॉल जोड़ता है जिनमें मेरे बूटस्ट्रैप साइट पर एक ऊर्ध्वाधर स्क्रॉलबार है।

— अदरक गिलहरी

क्या आपने यह देखने की कोशिश की है कि क्यों? तत्व निरीक्षक की जाँच करें और देखें कि बूटस्ट्रैप हाशिये, स्क्रॉलबार, या ऐसा कुछ के साथ गड़बड़ करता है।

— ग्रांटिकासन

1

यह शायद 15px मार्जिन के साथ कुछ करना था जो बूटस्ट्रैप सब कुछ पर डालता है, जब पृष्ठ का निरीक्षण करते समय कंटेनर मार्जिन स्क्रॉलबार के नीचे आता है। मैंने आवेदन किया overflow-x: hiddenऔर यह तय हो गया।

— अदरक गिलहरी

3

@ कैशिंगैंडर के समाधान ने मेरे लिए काम किया लेकिन क्षैतिज स्क्रॉलबार छिपाने के लिए मैंने शरीर के लिए एक और शैली जोड़ी। यहाँ पूरा समाधान है:

सीएसएस

<style>
/* prevent layout shifting and hide horizontal scroll */
html {
  width: 100vw;
}
body {
  overflow-x: hidden;
}
</style>

जे एस

$(function(){
    /**
     * For multiple modals.
     * Enables scrolling of 1st modal when 2nd modal is closed.
     */
    $('.modal').on('hidden.bs.modal', function (event) {
      if ($('.modal:visible').length) {
        $('body').addClass('modal-open');
      }
    });
});

जेएस ओनली सॉल्यूशन (जब 1 मोडल से दूसरा मोडल खोला गया):

/**
 * For multiple modals.
 * Enables scrolling of 1st modal when 2nd modal is closed.
 */
$('.modal').on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
    $('body').css('padding-right', 17);
  }
});

— हसन तारेक
स्रोत

2

मैंने उसी समस्या को ठीक करने की कोशिश की जो ट्विटर बूटस्ट्रैप .modal-openवर्ग द्वारा लागू की गई थी body। समाधान html {overflow-y: scroll}मदद नहीं करता है। एक संभव समाधान मैंने पाया {width: 100%; width: 100vw}कि htmlतत्व को जोड़ना है ।

— kashesandr
स्रोत

1

या इसे बॉडी में बदलें {अतिप्रवाह-य: स्क्रॉल}

— रुबेन

1

लेकिन यह हमेशा एक स्क्रॉलबार प्रदर्शित करेगा भले ही इसकी आवश्यकता न हो।

— राप्ती

आपको यह बताना चाहिए कि आप दो बार चौड़ाई क्यों निर्धारित कर रहे हैं? html { width: 100vw; }मेरे लिए काम किया

— हसन तारेक

मेरे लिए, यह वास्तव

— rbansal

2

मैं उस समस्या का उपयोग करता हूं, लेकिन इसे ठीक करने का सबसे अच्छा तरीका यह है (यह मेरे लिए काम करता है):

CSS फ़ाइल प्रकार पर:

body{overflow-y:scroll;}

इतना आसान! :)

— मेल्विन गुरेरो
स्रोत

2

कैल्क (100vw - 100%) का उपयोग करके पोस्ट किए गए समाधान सही रास्ते पर हैं, लेकिन इसके साथ एक समस्या है: आपके पास हमेशा स्क्रॉल के आकार को बाईं ओर एक मार्जिन होगा, भले ही आप विंडो का आकार बदल दें ताकि सामग्री पूरे व्यूपोर्ट को भर देती है।

यदि आप मीडिया क्वेरी के साथ इसे प्राप्त करने का प्रयास करते हैं, तो आपके पास एक अजीब तड़क-भड़क वाला पल होगा क्योंकि मार्जिन उत्तरोत्तर छोटा नहीं होगा जैसा कि आप विंडो का आकार बदलते हैं।

यहाँ एक समाधान है कि चारों ओर हो जाता है और AFAIK में कोई कमियां नहीं हैं:

मार्जिन का उपयोग करने के बजाय: अपनी सामग्री को केंद्रित करने के लिए ऑटो, इसका उपयोग करें:

body {
margin-left: calc(50vw - 500px);
}

अपनी सामग्री की आधी अधिकतम चौड़ाई के साथ 500px बदलें (इसलिए इस उदाहरण में सामग्री अधिकतम-चौड़ाई 1000px है)। सामग्री अब केंद्रित रहेगी और जब तक सामग्री व्यूपोर्ट को भरती नहीं है, तब तक मार्जिन सभी तरह से कम हो जाएगा।

मार्जिन को नकारात्मक होने से रोकने के लिए, जब व्यूपोर्ट अधिकतम-चौड़ाई से छोटा होता है, तो जैसे मीडिया क्वेरी जोड़ें:

@media screen and (max-width:1000px) {
    body {
        margin-left: 0;
    }
}

Et voilà!

— जोनाथन एसआई
स्रोत

2

यदि तालिका की चौड़ाई नहीं बदलेगी, तो आप तत्व की चौड़ाई (जैसे tbody) सेट कर सकते हैं जिसमें स्क्रॉलबार> 100% (स्क्रॉलबार के लिए अतिरिक्त स्थान की अनुमति देता है) और अतिप्रवाह-वाई को "ओवरले" सेट करें (ताकि स्क्रॉलबार स्थिर रहता है, और यह दिखाई देने पर बाईं ओर तालिका को स्थानांतरित नहीं करेगा)। स्क्रॉलबार के साथ तत्व के लिए एक निश्चित ऊंचाई भी निर्धारित करें, इसलिए स्क्रॉलबार दिखाई देगा जब ऊंचाई पार हो जाएगी। इस तरह:

tbody {
  height: 100px;
  overflow-y: overlay;
  width: 105%
}

ध्यान दें: आपको मैन्युअल रूप से चौड़ाई% को समायोजित करना होगा क्योंकि स्क्रॉलबार के स्थान का% आपकी टेबल चौड़ाई के सापेक्ष होगा (यानी: तालिका की छोटी चौड़ाई, स्क्रॉलबार को फिट करने के लिए अधिक% आवश्यक है, क्योंकि यह पिक्सेल में आकार स्थिर है )

एक गतिशील तालिका उदाहरण:

function addRow(tableID)
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
  
    for(var i=0; i<colCount; i++)
    {
        var newRow = row.insertCell(i);

        newRow.innerHTML = table.rows[0].cells[i].innerHTML;
        newRow.childNodes[0].value = "";
    }
}
 
function deleteRow(row)
{
    var table = document.getElementById("data");
    var rowCount = table.rows.length;
    var rowIndex = row.parentNode.parentNode.rowIndex;

    document.getElementById("data").deleteRow(rowIndex);
}

.scroll-table {
  border-collapse: collapse;
}

.scroll-table tbody {
  display:block;
  overflow-y:overlay;
  height:60px;
  width: 105%
}

.scroll-table tbody td {
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
}

.scroll-table thead tr {
  display:block;
}

.scroll-table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

.scroll-table td:first-child {
    border-left: thin solid;
}

.scroll-table td:last-child {
    border-right: thin solid;
}

.scroll-table tr:first-child {
    display: none;
}

.delete_button {
    background-color: red;
    color: white;
}

.container {
  display: inline-block;
}

body {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="test_table.css">
</head>

<body>
<h1>Dynamic Table</h1>
<div class="container">

  <table id="data" class="scroll-table">
    <tbody>
      <tr>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
      </tr>
    </tbody>
  </table>

  <input type="button" value="Add" onclick="addRow('data')" />

</div>

<script src="test_table.js"></script>
</body>
</html>

स्निपेट का विस्तार करें

— रॉबर्ट जेम्स मिट्टा
स्रोत

1

बस अपने कंटेनर तत्व की चौड़ाई को इस तरह सेट करना ट्रिक करेगा

width: 100vw;

यह उस तत्व को स्क्रॉलबार को नजरअंदाज कर देगा और यह पृष्ठभूमि रंग या छवियों के साथ काम करता है।

— Barsonax
स्रोत

-3

मैंने इसे हल करने के लिए कुछ jquery का उपयोग किया

$('html').css({
    'overflow-y': 'hidden'
});

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});

— मैकमिलियन करेंगे
स्रोत

3

आपको अपने उत्तर पर खराब स्वागत मिलने की संभावना है क्योंकि इस समाधान के लिए संपूर्ण जावास्क्रिप्ट ढांचे की आवश्यकता होती है। "सभी चीजें jQuery!"

— पॉल लामर्ट्स्मा

3

हाँ, jQuery निश्चित रूप से जाने का रास्ता है - doxdesk.com/img/updates/20091116-so-large.gif

— annonymous

-4

@media screen and (min-width: 1024px){
    body {
    min-height: 700px
    }
}

— विक्की
स्रोत

ढेर अतिप्रवाह में आपका स्वागत है! हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है। कृपया अपने कोड को व्याख्यात्मक टिप्पणियों के साथ भीड़ देने की कोशिश न करें, इससे कोड और स्पष्टीकरण दोनों की पठनीयता कम हो जाती है!

— एंड्रयू मायर्स

-5

स्वीकृत उत्तर के विपरीत जो ब्राउज़र विंडो पर एक स्थायी स्क्रॉल पट्टी का सुझाव देता है, भले ही सामग्री स्क्रीन से बह न जाए , मैं उपयोग करना पसंद करूंगा:

html{
  height:101%;
}

ऐसा इसलिए है क्योंकि यदि सामग्री वास्तव में ओवरफ्लो होती है तो स्क्रॉल बार की उपस्थिति अधिक समझ में आती है ।

यह अधिक से अधिक समझ में आता है इस ।

— निकुंज माधोगरिया
स्रोत

1

कम से कम अंतिम वाक्य आपके उत्तर में गलत है। यह प्रिंटर द्वारा मुद्रित अतिरिक्त खाली पृष्ठ के समान समझ में आता है।

— vp_arth