스크롤 막대를 vue onsenui v-ons-card에 자동으로 추가하는 방법

Question

많은 v-ons-list-item 요소를 추가하면 OnsenUI2 ons-card (특히 Vue2.js v-ons-card)의 설명서에 자동으로 내용 옆에 스크롤 막대가 표시됩니다.

는 여기를 참조하십시오 : 나는 수동으로 그것을 할 때

그러나 다음은

https://onsen.io/v2/api/vue/v-ons-card.html 내가 추가 목록 항목과 튜토리얼을 수정할 때 발생하는 스크린 샷, 그리고 스크롤바 추가 내 코드는 스크롤바가 없다.

<v-ons-card> 
    <div class="title"> 
    My title here 
    </div> 
    <div class="content"> 
    <v-ons-list> 
     <!-- <v-ons-list-header>row 1</v-ons-list-header> --> 
     <v-ons-list-item>Row 1</v-ons-list-item> 
     <v-ons-list-item>Row 2</v-ons-list-item> 
     <v-ons-list-item>Row 3</v-ons-list-item> 
     <v-ons-list-item>Row 4</v-ons-list-item> 
     <v-ons-list-item>Row 5</v-ons-list-item> 
     <v-ons-list-item>Row 6</v-ons-list-item> 
     <v-ons-list-item>Row 7</v-ons-list-item> 
     <v-ons-list-item>Row 8</v-ons-list-item> 
     <v-ons-list-item>Row 9</v-ons-list-item> 
     <v-ons-list-item>Row 10</v-ons-list-item> 
     <v-ons-list-item>Row 11</v-ons-list-item> 
     <v-ons-list-item>Row 12</v-ons-list-item> 
     <v-ons-list-item>Row 13</v-ons-list-item> 
     <v-ons-list-item>Row 14</v-ons-list-item> 
     <v-ons-list-item>Row 15</v-ons-list-item> 
     <v-ons-list-item>Row 16</v-ons-list-item> 
    </v-ons-list> 
    </div> 
</v-ons-card> 

어떻게 달성 되었습니까?

이 예에서는 전체 CSS가 표시되지 않으며 chrome devtools에서는 데모 앱을 열고 표시 할 수 없습니다. :-(

는 카드 내용, 카드 내부 포장 사업부에 style="overflow: auto"를 추가하거나, 카드 자체는 아무것도하지 않습니다. 그 튜토리얼에는 별도의 CSS 없다

Answer 1

. 이미지의 스크롤을 카드 요소가 아닌 페이지 콘텐츠에 있습니다. 단순히 height 및 overflow: auto으로 설정하면 카드 스크롤바가 표시됩니다.