根据父div高度调整水平滚动条位置

Question

我是css的新手，不知道该怎么做。

我有一个具有固定高度的父div和一个具有固定宽度且具有水平滚动溢出的子div。问题是子div的水平滚动隐藏在div的底部。是否有一种方法可以让孩子div水平滚动显示在附图中？

由于

Answer 1

尝试使用position：absolute作为子div。 如果您可以发布代码，我可以告诉您如何在您的具体示例

Answer 2

我使用jQuery的方法，看看this fiddle！

解释

这个版本是桌面版和移动（触摸）兼容。在这里，#scroller一个带有水平滚动条的隐藏div，用于捕捉滚动并调整#inner div的滚动位置。

#scroller＆amp;之间的最大水平滚动范围可能不同。 #inner，所以我从一个范围映射到另一个范围。

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;
}