垂直スクロールのみを表示しない

Question

こんにちは垂直スクロールを不可視にしたいのですが、水平スクロールバーを表示したままにします。 また、私のページを縦方向と横方向にスクロール可能にしたい。

私が使用：

.my_class::-webkit-scrollbar{ 
    display: none; 
    } 

を、それは両方のスクロールバーを非表示に。

Answer 1

私は、単純なCSSのトリックを使用して、あなたはこれを達成することができる文句を言わないことを言っています。

私はあなたが以下のように、あなたは、単にそれぞれのスクロールバータイプのCSSトリックを適用することが可能なカスタムスクロールバーのプラグインを使用しdはお勧め：

$(document).ready(function() { 
 
    $(".container").customScrollbar(); 
 
});

.container { 
 
    max-width: 300px; 
 
    max-height: 100px; 
 
} 
 

 
.container .overview { 
 
    width: 800px; 
 
} 
 

 
.scrollable .scroll-bar.horizontal { 
 
    background: #eee; height: 5px; border-radius: 20px; 
 
} 
 
.scrollable .scroll-bar.horizontal .thumb { 
 
    background: #999; 
 
    border-radius: 20px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.css" /> 
 
<script src="https://rawgit.com/mzubala/jquery-custom-scrollbar/master/jquery.custom-scrollbar.js"></script> 
 

 
<div class="container"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat. 
 
</div>

Answer 2

overflow-yのプロパティを確認してください。 CSS3です。

Answer 3

overflow-y: hidden; // hide vertical 
overflow-x: hidden; // hide horizontal 

この2つのCSSプロパティを使用してスクロールバーを非表示にすることができます。流動性の上に

Answer 4

用途： overflow-y: hidden