スワイプ左または右スクロールせずにCSSまたはJS？

Question

私はLIを携帯電話の左から右にスワイプしようとしていますが、これは単にCSSで行っています。私はそれがどのプラグインでも簡単にできますが、私のプロジェクトではプラグインを使用できません。主な要件は、スクロールバーを下から削除することです。コンテンツ領域に触れるとスクロールバーが表示されます。

親のdivを作成している場合overflow:hiddenスワイプしません。

.spotlight_numbers-v2 { 
 
width: 100%; 
 
max-width: 480px; 
 
float: left; 
 
background: #f3f3f3; 
 
overflow: auto; 
 
} 
 
.spotlight_numbers-v2 > ul { 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
width: 150%; 
 
} 
 
.spotlight_numbers-v2 > ul > li { 
 
color: #606060; 
 
font-weight: 500; 
 
display: inline-block; 
 
list-style: none; 
 
margin: 0 15px; 
 
padding: 10px; 
 
text-transform: uppercase; 
 
font-size: 16px; 
 
} 
 
.spotlight_numbers-v2 > ul > li > a { 
 
color: #606060; 
 
text-decoration: none; 
 
}

<div class="spotlight_numbers-v2"> 
 
    <ul> 
 
    <li><a href="#">Doctors</a></li> 
 
    <li><a href="#">Hospital</a></li> 
 
    <li><a href="#">Articles</a></li> 
 
    <li><a href="#">Drugs</a></li> 
 
    <li><a href="#">Interview</a></li> 
 
    </ul> 
 
</div>

Answer 1

はちょうど別の容器を使用し、それを.spotlight_numbers-v2の高さより低い高さを与え、overflow: hidden;にコンテナを設定して提案してください。

.container{ 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.spotlight_numbers-v2 { 
 
    width: 100%; 
 
    max-width: 480px; 
 
    float: left; 
 
    background: #f3f3f3; 
 
    overflow-y: auto; 
 
} 
 
.spotlight_numbers-v2 > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 150%; 
 
} 
 
.spotlight_numbers-v2 > ul > li { 
 
    color: #606060; 
 
    font-weight: 500; 
 
    display: inline-block; 
 
    list-style: none; 
 
    margin: 0 15px; 
 
    padding: 10px; 
 
    text-transform: uppercase; 
 
    font-size: 16px; 
 
} 
 
.spotlight_numbers-v2 > ul > li > a { 
 
    color: #606060; 
 
    text-decoration: none; 
 
}

<div class="container"> 
 
    <div class="spotlight_numbers-v2"> 
 
    <ul> 
 
     <li><a href="#">Doctors</a> 
 
     </li> 
 
     <li><a href="#">Hospital</a> 
 
     </li> 
 
     <li><a href="#">Articles</a> 
 
     </li> 
 
     <li><a href="#">Drugs</a> 
 
     </li> 
 
     <li><a href="#">Interview</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>