एक डीआईवी

Question

के ऊपर और नीचे स्क्रॉल बार प्रदर्शित करना मैं div के लिए शीर्ष & नीचे क्षैतिज स्क्रॉल बार प्रदर्शित करने की कोशिश कर रहा हूं। मुझे this SO question मिला और तदनुसार पेज कोड बदल दिया।

HTML/उस्तरा

<div class="wmd-view-topscroll"> 
    <div class="scroll-div"> 
    </div> 
</div> 
<div class="wmd-view"> 
    @Html.Markdown(Model.Contents) 
</div> 

सीएसएस

.wmd-view-topscroll, .wmd-view 
{ 
    overflow-x: scroll; 
    overflow-y: hidden; 
    width: 1000px; 
} 

.scroll-div 
{ 
    width: 1000px; 
} 

जावास्क्रिप्ट

<script type="text/javascript"> 
$(function(){ 
    $(".wmd-view-topscroll").scroll(function(){ 
     $(".wmd-view") 
      .scrollLeft($(".wmd-view-topscroll").scrollLeft()); 
    }); 
    $(".wmd-view").scroll(function(){ 
     $(".wmd-view-topscroll") 
      .scrollLeft($(".wmd-view").scrollLeft()); 
    }); 
}); 
</script> 

यह नीचे scrol प्रदर्शित करता है सामान्य के रूप में lbar लेकिन शीर्ष स्क्रॉल बार अक्षम है, मैं यहाँ क्या याद कर रहा हूँ?

अग्रिम

---

अद्यतन

धन्यवाद यहां तक ​​कि जब मैं जावास्क्रिप्ट निकालने के लिए, उत्पादन में ही है। लगता है कि जावा स्क्रिप्ट कोड निष्पादित नहीं हो रहा है, लेकिन कोई जावास्क्रिप्ट त्रुटियां सूचीबद्ध नहीं हैं।

Answer 1

अंत में इस कोड के साथ इसे ठीक करने में कामयाब रहे ...

एचटीएमएल

<div class="wmd-view-topscroll"> 
    <div class="scroll-div"> 
     &nbsp; 
    </div> 
</div> 
<div class="wmd-view"> 
    <div class="dynamic-div"> 
     @Html.Markdown(Model.Contents) 
    </div> 
</div> 

सीएसएस

.wmd-view-topscroll, .wmd-view 
{ 
    overflow-x: auto; 
    overflow-y: hidden; 
    width: 1000px; 
} 

.wmd-view-topscroll 
{ 
    height: 16px; 
} 

.dynamic-div 
{ 
    display: inline-block; 
} 

जावास्क्रिप्ट/JQuery

<script type="text/javascript"> 
    $(function() { 

     $(".wmd-view-topscroll").scroll(function() { 
      $(".wmd-view") 
      .scrollLeft($(".wmd-view-topscroll").scrollLeft()); 
     }); 

     $(".wmd-view").scroll(function() { 
      $(".wmd-view-topscroll") 
      .scrollLeft($(".wmd-view").scrollLeft()); 
     }); 

    }); 

    $(window).load(function() { 
     $('.scroll-div').css('width', $('.dynamic-div').outerWidth()); 
    }); 
</script> 

धन्यवाद दिया जवाब के लिए ... यह वास्तव में मुझे मदद की इनर को समझने के लिए काम कर रहे। :)

Answer 2

आप नीचे दिए गए अनुसार अपने एचटीएमएल और सीएसएस में कुछ बदलावों से प्राप्त कर सकते हैं;

एचटीएमएल इस तरह दिखना चाहिए:

<div class="wmd-view-topscroll"> 
    <div class="scroll-div1"> 
    </div> 
</div> 
<div class="wmd-view"> 
    <div class="scroll-div2"> 
     @Html.Markdown(Model.Contents) 
    </div> 
</div> 

सीएसएस इस तरह दिखना चाहिए:

wmd-view-topscroll, .wmd-view { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    width: 300px; 
    border: none 0px RED; 
} 

.wmd-view-topscroll { height: 20px; } 
.wmd-view { height: 200px; } 
.scroll-div1 { 
    width: 1000px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

.scroll-div2 { 
    width: 1000px; 
    height:20px; 
} 

SEE DEMO