Css Scrool hakkında
Merhaba,
Bootstrap kullanıyorum. Aşağıdaki linkte görebileceğiniz bir tasarımım bulunmakta.
https://i.hizliresim.com/nj8znye.jpeg
İstediğim ekranı taşmadan ve scroll çıkmadan horizotal scroll ile notlarımı kaydırmak istiyorum.
<code>
.content{
font-size: 14px;
height: 100vh;
overflow-y: scroll;
mask-image: linear-gradient(to top, transparent, black),
linear-gradient(to left, transparent 17px, black 3px);
mask-size: 100% 10000px;
mask-position: left bottom;
-webkit-mask-image: linear-gradient(to top, transparent, black),
linear-gradient(to left, transparent 17px, black 3px);
-webkit-mask-size: 100% 10000px;
-webkit-mask-position: left bottom;
transition: mask-position 0.3s, -webkit-mask-position 0.3s;
scrollbar-width: thin;
border-right: 1px solid #ddd;
}
</code>
<code>
<div class="row" style="margin-right:0;margin-left:0">
<div class="col-md-3">
<div class="content">
</div>
</div>
<div class="col-md-9">
<div class="d-flex">
<div class="col-md-4 content">
</div>
<div class="col-md-4 content">
</div>
<div class="col-md-4 content">
</div>
<div class="col-md-4 content">
</div>
<div class="col-md-4 content">
</div>
</div>
</div>
</div>
</code>
teknik olarak scroll çıkmasının sebebi tam ekrana sığmıyor oluşu, overflow-y: hidden
diyerek sağdaki scrollu gizleyebilirsin, overflow-x: auto
diyerekte allttaki scrollu aktif edebilirsin.
yan yana durabilmeleri için container'ın flex ve içindeki elemanlarında sabit bir genişliği ve flex-shrink: 0 olması gerekir.