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

Question

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

我有一个具有固定高度的父 div 和一个具有固定宽度且水平滚动溢出的子 div。问题是子 div 水平滚动隐藏在 div 的底部。有没有办法让child div水平滚动可以像附图那样显示？

谢谢

Answer 1

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

说明

此版本与桌面和移动设备 (Touch) 兼容。此处，#scroller 是一个带有水平滚动条的隐藏 div，用于捕获滚动并调整 #inner div 的滚动位置。

#scroller 和 #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;
}