JScrollPane顯示空白空間時，孩子已經溢出：隱藏

我想使用JScrollPane（http://jscrollpane.kelvinluck.com/）呈現一個具有溢出的兒童的div：隱藏。當這樣做JScrollPane呈現但水平滾動時，會出現一個大的空白區域，溢出的文本將出現。下面是一張顯示問題的圖片，以及相關的代碼和一個JS小提琴展示了這個問題，如果你滾動到右側，你會發現有一個大面積顯示我正試圖刪除。任何想法如何做到這一點？JScrollPane顯示空白空間時，孩子已經溢出：隱藏

<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({}); 
});

Example Image

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

來源

2013-01-17 Jamie

這是因爲內的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-17 05:06:19

當然更好，但不是我正在尋找的效果。我根本不需要水平滾動，我希望內容被截斷。我可以通過將內部div的寬度設置爲200px來實現這一點，但我試圖將大小設置爲百分比而不是像素大小。那有意義嗎？這更接近我所尋找的，但我只是想要截斷信息。下面顯示了我沒有JScrollPane的情況以及JScrollPane中發生了什麼。 http://jsfiddle.net/yTaAS/4/注意到非JScrollPane版本沒有滾動條。 – Jamie

真的很難理解你的問題。你能否提一下你期望的確切輸出？ –

你是否想要在使用或不使用JScrollpane的情況下產生相同的效果，請檢查以下內容：http://jsfiddle.net/pitchaip/x8bTh/1/ –

JScrollPane顯示空白空間時，孩子已經溢出：隱藏

回答

相關問題