如何啓用垂直滾動時添加填充

我有一個項目列表，當我顯示垂直滾動（overflow-y：auto;），當高度達到200px時。但我想添加padding-right:20px滾動時啓用否則我不想要padding-right。我知道使用jQuery我們可以檢查身高和適用，但我使用angularjs所以即使dom被加載我的jquery沒有得到應用，我試圖在window.load也加入但沒有成功。如何啓用垂直滾動時添加填充

ul{ 
     list-style:none; 
     padding-left:0; 
     margin-left:0; 
     margin-top: 20px; 
     padding-left: 5px; 
     padding-right: 20px; 
     overflow-y:auto; 
     height:200px 
    }

在上述樣式中，我添加了padding-right20px;這個我只想在垂直滾動啓用時應用。這裏是我的Fiddle請讓我知道任何建議，以獲得此。這是一個更小提琴時，高度超過200像素，Fiddle with scroll enabled

來源

2016-12-30 Sudarshan Kalebere

請問我爲什麼要添加這個填充權？ –

垂直滾動啓用時，如果我不添加填充權：20px然後列表項將在垂直欄內流動。 –

我不確定是否是這種情況。滾動條顯示時，「li」寬度自動縮小（至少在Chrome中）。這裏是更新的小提琴：https://jsfiddle.net/5a2r84tk/1/ ...如果你檢查任何'li'計算出的寬度顯示爲265px。現在，如果你點擊'創建一個'滾動條獲得顯示，並且'li'的寬度變爲248px。 –

試試這個：

<ul ng-style="list.length>7 ? {'padding-right': '20px','overflow-y':'auto'}:{'padding-right': '0'}"> ... </ul>

的CSS：

ul { 
    list - style: none; 

    padding - left: 0; 
    margin - left: 0; 
    margin - top: 20 px; 
    padding - left: 5 px; 

    height: 200 px 
} 
li { 
    background: gray; 
    color: #fff; 
    margin - bottom: 10 px; 
} 
.container { 
    width: 300 px 
}

會爲你工作。

來源

2016-12-30 06:16:15

謝謝你會嘗試等待 –

非常感謝你 –

如何啓用垂直滾動時添加填充

回答

相關問題