CODEWITHSUNDEEP
css
Heren
Heren

Reputation: 3

Adjust horizontal scrollbar location based on parent div height

I'm new to css and not sure how to do this.

I have a parent div that has a fixed height and a child div that has a fixed width with horizontal scroll overflow. The problem is that the child divs horizontal scroll is hidden on the bottom of the div. Is there a way so that the child divs horizontal scroll can be displayed as in the attached picture?

enter image description here

Thanks

Upvotes: 0

Views: 2042

Answers (2)

nipunasudha
nipunasudha

Reputation: 2607

My approach with jQuery, take a look at this fiddle!

enter image description here

Explanation

This version is desktop & mobile (Touch) compatible. Here, #scroller a hidden div with a horizontal scroll-bar to capture the scrolling and adjust the #inner div's scroll position.

Maximum horizontal scroll ranges can be different between #scroller & #inner, so I'm mapping from one range to the other.

HTML

<div id="outer">
  <div id="scroller">
    <div id="expander"></div>
  </div>
  <div id="inner">
    <h1>This is looong text for testing</h1>
  </div>
</div>

CSS

#outer {
  width: 100%;
  height: 300px;
  border: 3px solid red;
  overflow-y: scroll;
  position: relative;
}

#inner {
  width: 50%;
  height: 700px;
  border: 3px solid blue;
  overflow-x: hidden;
}

#scroller {
  height: 300px;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-x: scroll;
}

#expander {
  width: 200%;
  height: 1px;
}

h1 {
  width: 700px;
}

JQuery

$("#outer").on('scroll', function() {
  var oTop = $("#outer").scrollTop();
  $('#scroller').css('top', oTop);
});

$("#scroller").on('scroll', function() {
  var scrollerMax = $(this)[0].scrollWidth - $(this).width();
  var innerMax = $('#inner')[0].scrollWidth - $('#inner').width();
  $('#inner').scrollLeft(mapRange($("#scroller").scrollLeft(), 0, scrollerMax, 0, innerMax))
});

function mapRange(x, in_min, in_max, out_min, out_max) {
  return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

Upvotes: 1

ShiZniT
ShiZniT

Reputation: 69

try using position:absolute for the child div. if you could post the code i can show you how on your specific example

Upvotes: 0

Related Questions