ओवरफ्लो स्क्रॉलबार को "स्थिति: पूर्ण"

Question

के साथ ओवरफ्लो स्क्रॉलबार को छोड़कर पूर्ण चौड़ाई का उपयोग करें, मैं overflow: scroll वाले किसी अन्य div के अंदर एक निश्चित शीर्ष स्थिति पर पूर्ण चौड़ाई वाला एक छोटा लाल div चाहता हूं। मुझे उम्मीद है कि जेएसफ़िल्ड इसे स्पष्ट करता है: http://jsfiddle.net/mCYLm/2/।

मुद्दा यह है कि लाल div scrollbar ओवरलैप कर रहा है। मुझे लगता है कि right: 0 का अर्थ div.wrapper का दाहिना हाथ है; यह div.main की स्क्रॉलबार को घटा नहीं देता है। जब मैं overflow: scroll को div.wrapper में ले जाता हूं, तो लाल बैनर का सही आकार होता है (fiddle)। हालांकि, यह अब एक निश्चित स्थिति पर नहीं है (नीचे स्क्रॉलिंग बैनर स्क्रॉल करता है)।

मैं निम्नलिखित दो चीजों को एक साथ कैसे प्राप्त कर सकता हूं?

• लाल बैनर this fiddle में निश्चित स्थिति पर है।
• लाल बैनर में this fiddle जैसे स्क्रॉलबार को छोड़कर पूर्ण चौड़ाई है।

मैं इसे Google क्रोम में काम करना चाहता हूं।

HTML:

<div class="wrapper"> 
    <div class="red-banner"></div> 
    <div class="main"> 
     <div class="item">foo</div> 
     <div class="item">foo</div> 
     <div class="item">foo</div> 
     <div class="item">foo</div> 
    </div> 
</div>​ 

सीएसएस:

div.wrapper { 
    position: relative; 
} 

div.main { 
    height: 200px; 
    overflow-y: scroll; 
} 

div.item { 
    border: 1px solid black; 
    margin: 20px; 
    padding: 20px; 
} 

div.red-banner { 
    background-color: red; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    height: 20px; 
} 

Answer 1

ऐसा लगता है कि यह शुद्ध सीएसएस के साथ संभव नहीं है, इसलिए यहां एक जावास्क्रिप्ट (jQuery) हैक:

$(function() { 
    var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body"); 
    var $child = $("<div>").css({ height: 2 }).appendTo($container); 
    window.SCROLLBAR_WIDTH = $container.width() - $child.width(); 
    $container.remove(); 
}); 

तो

:

$("div.red-banner").css({ 
    right: SCROLLBAR_WIDTH 
}); 

Answer 2

एचटीएमएल

<div class="scroller"> 
    <div class="banner-wrapper"> 
     <div class="banner"></div> 
    </div> 
</div> 

<div class="main"> 
    <div class="item">foo</div> 
    <div class="item">foo</div> 
    <div class="item">foo</div> 
    <div class="item">foo</div> 
</div>​ 

सीएसएस

* { margin: 0; padding: 0 } 
body { 
    padding-top: 30px; 
} 

div.main { 
    height: 200px; 
    width: 100%; 
    overflow-y: scroll; 
    position: absolute; 
    z-index: 50; 
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0))); 
} 

div.item { 
    border: 1px solid black; 
    margin: 20px; 
    padding: 20px; 
} 

div.scroller { 
    height: 20px; 
    width: 100%; 
    position: absolute; 
    z-index: 100; 
    overflow: hidden; 
} 

div.banner-wrapper { 
    background: transparent; 
    position: relative; 
    height: 20px; 
    overflow-y: scroll; 
    left: 0; 
    margin-right: -20px; 
} 
div.banner { 
    height: 20px; 
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));; 
    margin-left: 20px; 
    margin-right: 40px; 
} 

विकास संस्करण: http://jsfiddle.net/mCYLm/13/
अंतिम संस्करण: http://jsfiddle.net/mCYLm/14/ ज़ूमिंग और चर व्यूपोर्ट चौड़ाई के साथ

काम करता है।
! BUG: दाएं शीर्ष से स्क्रॉलबार बटन पहुंच योग्य/क्लिक करने योग्य नहीं है।

में परीक्षण किया गया:

• IE6,7,8,9 (विंडोज़)
• FF11 (विंडोज़)
• गूगल क्रोम 18 (ubuntu)
• सफारी 5.1 (OSX)