CSS選框不顯示所有數據

我有一個簡單的CSS選框滾動數據，它工作的很好，但它停止顯示大約10行後的數據。如果我把它做得更大，那隻會讓頁面變得混亂。CSS選框不顯示所有數據

代碼：

<div class="col-sm-2"> 
    <h3>AREAS COVERED</h3><h5><div class="microsoft areas"> 
    <p class="marquee"><? echo $areas ?></p> 
</div>

CSS：

.areas { 
    width: 100px; 
    height: 140px; 
    margin: 1em auto; 
    overflow: hidden; 
    background: white; 
    position: relative; 
    box-sizing: border-box; 
} 

.marquee { 
    top: 0px; 
    position: relative; 
    box-sizing: border-box; 
    animation: marquee 15s linear infinite; 
} 

.marquee:hover { 
    animation-play-state: paused; 
} 

/* Make it move! */ 
@keyframes marquee { 
    0% { top: 8em } 
    100% { top: -11em } 
} 

/* Make it look pretty */ 
.microsoft .marquee { 
    margin: 0; 
    padding: 0 1em; 
    line-height: 1.5em; 
    font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif; 
} 

.microsoft:before, .microsoft::before, 
.microsoft:after, .microsoft::after { 
    left: 0; 
    z-index: 1; 
    content: ''; 
    position: absolute; 
    pointer-events: none; 
    width: 100%; height: 2em; 
    background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0)); 
} 

.microsoft:after, .microsoft::after { 
    bottom: 0; 
    transform: rotate(180deg); 
} 

.microsoft:before, .microsoft::before { 
    top: 0; 

}

的areas.php文件的格式如下約100行：

WestMidlands 
WestSussex 
WestYorkshire 
Wiltshire

它加載一切只是停止顯示它。我究竟做錯了什麼？

來源

2017-02-09 Jules

這個你要什麼？ http://codepen.io/anon/pen/JEmXjE –

伴侶謝謝你的工作！不能準確地看到你已經改變，但謝謝你！ – Jules

我會將其作爲解答提交回答 –

你的動畫應該從top: 100%;到top: 0; transform: translateY(-100%)。

top: 100%會將選框的頂部放在其容器的底部。

top: 0; transform: translateY(-100%);會將選框的底部放在容器的頂部。

.areas { 
 
    width: 100px; 
 
    height: 140px; 
 
    margin: 1em auto; 
 
    overflow: hidden; 
 
    background: white; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
.marquee { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    animation: marquee 15s linear infinite; 
 
} 
 

 
.marquee:hover { 
 
    animation-play-state: paused; 
 
} 
 

 

 
/* Make it move! */ 
 

 
@keyframes marquee { 
 
    0% { 
 
    top: 100%; 
 
    } 
 
    100% { 
 
    top: 0; 
 
    transform: translateY(-100%); 
 
    } 
 
} 
 

 

 
/* Make it look pretty */ 
 

 
.microsoft .marquee { 
 
    margin: 0; 
 
    padding: 0 1em; 
 
    line-height: 1.5em; 
 
    font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif; 
 
} 
 

 
.microsoft:before, 
 
.microsoft::before, 
 
.microsoft:after, 
 
.microsoft::after { 
 
    left: 0; 
 
    z-index: 1; 
 
    content: ''; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    width: 100%; 
 
    height: 2em; 
 
    background-image: linear-gradient(180deg, #FFF, rgba(255, 255, 255, 0)); 
 
} 
 

 
.microsoft:after, 
 
.microsoft::after { 
 
    bottom: 0; 
 
    transform: rotate(180deg); 
 
} 
 

 
.microsoft:before, 
 
.microsoft::before { 
 
    top: 0; 
 
}

<div class="col-sm-2"> 
 
    <h3>AREAS COVERED</h3> 
 
    <div class="microsoft areas"> 
 
    <p class="marquee"> 
 
     WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire WestMidlands WestSussex WestYorkshire Wiltshire 
 
    </p> 
 
    </div>

來源

2017-02-09 02:37:18

CSS選框不顯示所有數據

回答

相關問題