स्क्रॉलबार पृष्ठ का आकार बदलना

Question

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

मुझे नहीं पता कि मैंने खुद को स्पष्ट किया है या नहीं।

मान लें कि यह एक वेबपृष्ठ है:

| ......... सामग्री सामग्री ........ |
| ......... सामग्री सामग्री ........ |
| ......... सामग्री सामग्री ........ |
| ......... सामग्री सामग्री ........ |
| ......... सामग्री सामग्री ........ |
| ......... सामग्री सामग्री ........ |
| ......... सामग्री सामग्री ........ |

और इस यह कैसे स्क्रॉलबार साथ दिखाई देता है:

| ..... सामग्री सामग्री .......... | |
| ..... सामग्री सामग्री .......... | |
| ..... सामग्री सामग्री .......... | |
| ..... सामग्री सामग्री .......... | |
| ...... सामग्री सामग्री .......... | |
| ..... सामग्री सामग्री .......... | |
| ..... सामग्री सामग्री .......... | |

लेकिन मुझे ऐसा कुछ पसंद है:

| ......... सामग्री सामग्री ...... | |
| ......... सामग्री सामग्री ...... | |
| ......... सामग्री सामग्री ...... | |
| ......... सामग्री सामग्री ...... | |
| ......... सामग्री सामग्री ...... | |
| ......... सामग्री सामग्री ...... | |
| ......... सामग्री सामग्री ...... | |

डॉट्स व्हाइटस्पेस का प्रतिनिधित्व करते हैं, सामग्री वेबपृष्ठ सामग्री का प्रतिनिधित्व करती है और दाईं ओर कॉलम स्क्रॉलबार का प्रतिनिधित्व करता है।

Answer 1

आप अपने शरीर के लिए overflow-y: scroll सेट कर सकते हैं। यह हमेशा एक लंबवत स्क्रॉलबार प्रदर्शित करेगा जो अक्षम है जब तक सामग्री स्क्रॉल करने के लिए पर्याप्त नहीं है। इस तरह से सामग्री बाईं ओर स्थानांतरित नहीं होगी जब तक कि आप वास्तव में स्क्रॉल कर सकें और इस काम को करने के लिए कोई स्क्रिप्टिंग की आवश्यकता नहीं है।

Answer 2

आप जांच सकते हैं कि स्क्रीन में स्क्रॉल बार है या नहीं। यदि आपके से सच है तो सामग्री को सही तरीके से मार्ज कर सकता है शायद यह लिंक आपकी मदद करेगा: Detect if a page has a vertical scrollbar?

Answer 3

अगर आप सभी पर स्क्रॉलबार की जरूरत नहीं कर रहे हैं, तो आप इस का उपयोग कर सकते हैं:

body { 
    overflow-y: hidden; 
} 

युपीडी।

सीएसएस:

body { 
    overflow: hidden; 
} 

#fake_body { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: -32px; 
    bottom: 0; 
    overflow-y: scroll; 
} 

एचटीएमएल: इसलिए यदि आप सामग्री स्क्रॉल करने के लिए स्क्रॉलबार, लेकिन यह छुपाना चाहते हैं की जरूरत है, तो आप उपयोग कर सकते हैं following method (demo on dabblet.com)

<div id="fake_body"> 
    <ul> 
     <li>content content content #01</li> 
     <li>content content content #02</li> 
     <li>content content content #03</li> 
     … 
     <li>content content content #55</li> 
    </ul> 
</div> 

Answer 4

मैं एक ही समस्या थी और जेएस/jQuery का उपयोग कर केवल समाधान मेरे लिए काफी अच्छा था। निम्नलिखित कोड पैदा करने के लिए http://davidwalsh.name/detect-scrollbar-width, http://api.jquery.com/css/#css2, Center a position:fixed element:

मैं Detect if a page has a vertical scrollbar? के लिए लिंक से पहले प्रदान की है और उन लिंक्स का इस्तेमाल किया।

सीएसएस:

body { 
    position: absolute; 
    left: 50%; 
    margin-left: -400px; 
    width: 800px; 
    height: 100%; 
} 

.scrollbar-measure { 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
    position: absolute; 
    top: -9999px; 
} 

जे एस:

$(document).ready(function() { 
    // Check if body height is higher than window height :) 
    if ($(document).height() > $(window).height()) { 

     // Create the measurement node 
     var scrollDiv = document.createElement("div"); 
     scrollDiv.className = "scrollbar-measure"; 
     document.body.appendChild(scrollDiv); 
     // Get the scroll bar width 
     var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 
     // Delete the DIV 
     document.body.removeChild(scrollDiv); 

     // Change margin-left parameter for #container for preventing shift caused by scroll bar 
     var current_margin_left_px = $("#container").offset().left; 
     var current_margin_left = parseInt(current_margin_left_px, 10); 
     var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px"; 
     $("#container").css("margin-left", changed_margin_left); 
    } 
}); 

लचीला शरीर के मामले में कुछ और कोड चौड़ाई जोड़ा जाना आवश्यक है।

Answer 5

overflow-x: hidden; 

शरीर सीएसएस कोड में

, बहुत सहायता की है!डैन, मुझे एक सरल उत्तर के लिए चारों ओर सर्फ करने के लिए 45 मिनट ले गए।

क्या गलत हुआ? ... मेरे पास एक होवर = शो इमेज चीज चल रही थी। मैंने सभी छवियों का सही ढंग से आकार बदल दिया; जब मैंने पृष्ठ को रीफ्रेश किया, तो स्क्रॉलबार के पास बहुत अधिक खेल खेलने का तरीका था! ..... इसलिए मैंने प्रत्येक div टैग में एक ओवरफ्लो-एक्स लगाया, (व्यक्तिगत सूची आइटम को सौंपा गया प्रत्येक div टैग), और कुछ भी नहीं हुआ! समाधान: कोड सही था, लेकिन प्लेसमेंट को शरीर टैग में ही होना आवश्यक था। व्यक्तिगत div टैग नहीं। डैन ..... धन्यवाद

Answer 6

MDN docs के अनुसार, ब्राउज़र में अच्छी तरह से समर्थित नहीं है, हालांकि मुझे लगता है कि आपको यह दिलचस्प लगेगा।

overflow-y: overlay; 

ब्राउज़र, Google Chrome जैसे कि संपत्ति का समर्थन में, यह जब एक स्क्रॉलबार की जरूरत है पर अपने सामग्री के शीर्ष के बजाय अपनी सामग्री स्थानांतरण पर स्क्रॉलबार डाल देंगे। फिर आप पर्याप्त मात्रा में पैडिंग जोड़ सकते हैं ताकि आपकी सामग्री कभी भी इसमें शामिल न हो।

ऐसा लगता है कि यह संपत्ति लोकप्रिय नहीं है, और यहां तक ​​कि ब्राउज़र जो इसका समर्थन करते हैं, अब इसके लिए समर्थन छोड़ने की योजना बना रहे हैं। मुझे समझ में नहीं आता क्यों, क्योंकि इसका निश्चित रूप से इसका उपयोग होता है।