0

我正在尝试使用 JScrollPane ( http://jscrollpane.kelvinluck.com/ ) 来呈现带有溢出的子元素的 div:hidden。执行此操作时，JScrollPane 呈现但水平滚动时会出现一个大的空白区域，溢出的文本会出现。下面是显示问题的图像以及相关代码和显示问题的 JS fiddle，如果您向右滚动，您会注意到有一大块区域显示我要删除的内容。任何想法如何做到这一点？

<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/

4

1 回答 1

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>
于 2013-01-17T05:06:19.230 回答