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

【问题标题】：Adjust horizontal scrollbar location based on parent div height根据父 div 高度调整水平滚动条位置
【发布时间】：2017-11-25 04:14:49
【问题描述】：

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

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

谢谢

【问题讨论】：

嗨！欢迎来到 StackOverflow。您没有向我们提供足够的详细信息来帮助您解决问题。请参阅本文以了解如何使您的帖子更好并获得答案。 stackoverflow.com/help/how-to-ask

标签： css

【解决方案1】：

我的jQuery方法，看看this fiddle！

说明

此版本兼容桌面和移动（触控）。这里，#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;
}

【讨论】：

谢谢，这就是我要找的。奇怪的是，这样的事情在 css 中是不可能的。 :)

【解决方案2】：

尝试对子 div 使用 position:absolute。如果您可以发布代码，我可以向您展示具体示例的方法

【讨论】：