当孩子们有溢出时，JScrollPane显示空白：隐藏

Question

我正在尝试使用JScrollPane（http://jscrollpane.kelvinluck.com/）来渲染一个包含溢出：隐藏的子节点的div。在执行此操作时，JScrollPane呈现但水平滚动时会出现一个大的空白区域，其中会出现溢出的文本。下面是一个显示问题的图像以及相关代码和显示问题的JS小提琴，如果向右滚动，您会注意到有一个大区域显示我正在尝试删除的内容。有什么想法怎么做？

<div id="test" style="width:200px;overflow:auto;">
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
</div>

$(document).ready(function(){
    $('#test').jScrollPane({});
});

http://jsfiddle.net/yTaAS/1/

Answer 1

这是因为内部div占用父div #test的宽度。我将html替换为以下内容，现在正在运行。

<div id="test" style="width:200px;overflow:auto;">
  <div style="display:inline-block;">
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  <div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
  </div>
</div>