v2.5.2
Giriş yap

Css Scrool hakkında

siyahkalem
409 defa görüntülendi

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>

tayfunerbilen
1178 gün önce

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.