Displaying scroll bars on Top & Bottom of a DIV
28,917
Solution 1
Finally managed to fix it with this code...
HTML
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
<div class="dynamic-div">
@Html.Markdown(Model.Contents)
</div>
</div>
CSS
.wmd-view-topscroll, .wmd-view
{
overflow-x: auto;
overflow-y: hidden;
width: 1000px;
}
.wmd-view-topscroll
{
height: 16px;
}
.dynamic-div
{
display: inline-block;
}
Javascript/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>
Thanks for the answer given... It really helped me to understand the Inner Working. :)
Solution 2
You can achieve by some tweaks in your HTML and CSS as given below;
HTML Should look like this:
<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>
CSS Should look like this:
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;
}
Related videos on Youtube
Author by
Nalaka526
Updated on August 03, 2020Comments
-
Nalaka526 almost 4 years
I'm trying to display top & bottom horizontal scroll bars for a
div
. I found this SO question and changed page code accordingly.HTML/Razor
<div class="wmd-view-topscroll"> <div class="scroll-div"> </div> </div> <div class="wmd-view"> @Html.Markdown(Model.Contents) </div>
CSS
.wmd-view-topscroll, .wmd-view { overflow-x: scroll; overflow-y: hidden; width: 1000px; } .scroll-div { width: 1000px; }
Javascript
<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>
This displays bottom scrollbar as normal but the top scroll bar is disabled, what am I missing here?
Thanks in advance
UPDATE
Even when I remove the javascript, output is same. Seems Java Script code is not executing, but no javascript errors listed.
-
Nalaka526 almost 12 yearsSorry... This didn't work in my project (same results). May be something wrong in my page structure... :(
-
Ahsan Khurshid almost 12 years@Nalaka526: Use the same css and html given in my answer.
-
Milche Patern almost 10 yearsGreetings, can you do this with a 'fluid' width ?
-
Alex Petralia almost 7 years@A.K Do you know why the scroll barely inches along when you click on the 'blank space' area of the scrollbar? Most scrollbars I see on pages move a lot more than the one implemented here (and in my own code)