100% Scrollbar - R10.net

23-06-2021, 22:52:12

Merhaba Arkadaşlar,

Bir "Div" elementim var. "Div" Yüksekliği 100%
"Div" elementimin içindeki içerikler arttıkca scroll olmasını istiyorum. İçerikleri manuel elle doldurucam. Aynı zamanda hangi ekran çözünürlüğünden bakılırsa bakılsın scroll sağlıklı çalışmalı. Yani "Div" elementim Ekran yüksekliğine göre %100 olduğunda verilerin tamamı görünmeli yani scroll çıkmadan veriler listelenmeli. Bir çok yöntem, kütüphane denedim fakat çözemedim. Sizin bir çözümünüz veya bildiğiniz bir kütüphane var mı?

23-06-2021, 23:11:47

#2

TitaMest

denediğiniz şeylerden örnek verseniz daha iyi olabilir.

anladığım kadarıyla

<div style="height: 100vh;overflow-y: auto;">
  <div style="padding:15px;">
    <p>
      içerik
    </p>
  </div>
</div>

23-06-2021, 23:10:31

#3

aliyanar

TitaMest adlı üyeden alıntı: mesajı görüntüle

denediğiniz şeylerden örnek verseniz daha iyi olabilir.

anladığım kadarıyla

<div style="height: 100vh;overflow-y: auto;">
  <div style="padding:15px;">
    <p>
      içerik
    </p>
  </div>
</div>

Valla hocam 2 yöntem denedim. Önce manuel yapmaya çalıştım sizin yaptığınız gibi. Sonra "Simple Scrollbar Master" ve "FakeScrollbar" diye iki kütüphane var bunları denedim. 100 VH yemiyor.

23-06-2021, 23:12:00

#4

TitaMest

aliyanar adlı üyeden alıntı: mesajı görüntüle

Valla hocam 2 yöntem denedim. Önce manuel yapmaya çalıştım sizin yaptığınız gibi. Sonra "Simple Scrollbar Master" ve "FakeScrollbar" diye iki kütüphane var bunları denedim. 100 VH yemiyor.

Neyin nasıl yemediğini anlamadığım için bir şey diyemiyorum. Açıklamanızdan anladığımı attım.

23-06-2021, 23:14:06

#5

aliyanar

TitaMest adlı üyeden alıntı: mesajı görüntüle

Neyin nasıl yemediğini anlamadığım için bir şey diyemiyorum. Açıklamanızdan anladığımı attım.

Scrollbar olan div'in yüksekliği %100 olunca içindeki veriler küçük ekranlarda yarım geliyor.

23-06-2021, 23:18:58

#6

TitaMest

aliyanar adlı üyeden alıntı: mesajı görüntüle

Scrollbar olan div'in yüksekliği %100 olunca içindeki veriler küçük ekranlarda yarım geliyor.

bakabileceğim örnek var mı?

23-06-2021, 23:19:55

#7

aliyanar

Örneğin;
https://test3.elegansajans.net/test.html

https://prnt.sc/16hpyfp

Tarayıcıyı yukarı veya aşağı doğru küçültüyorum fakat alttaki veriler görünmüyor..

24-06-2021, 01:40:41

#8

Onur89TR

<html><head>
<style>
.dnmdiv{ height: calc(100vh - 16px); overflow: hidden; }
</style>
</head><body>
<div class="dnmdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod justo sed lacus vestibulum, vel sollicitudin libero blandit. In luctus hendrerit risus non varius. Suspendisse ipsum odio, consectetur et suscipit sed, volutpat quis lectus. Vestibulum eu nulla dictum, molestie mauris sed, ultricies lorem. Nam mi ipsum, accumsan sed felis vitae, placerat suscipit diam. Donec egestas faucibus rhoncus. Proin porta, libero malesuada fringilla pretium, tellus orci auctor mi, eget venenatis ex massa non dolor.

Nulla in lacus erat. Suspendisse pulvinar justo risus, nec dapibus orci tincidunt in. Sed gravida dapibus lectus in efficitur. Sed a sem vel elit pharetra imperdiet in placerat orci. Maecenas vitae enim vel enim semper pellentesque. In metus quam, dictum hendrerit tellus eget, blandit ultricies massa. Fusce id pharetra odio, eget convallis lectus. Suspendisse condimentum, elit eu consectetur pretium, lacus leo accumsan ipsum, quis ornare tellus turpis iaculis urna. Vivamus efficitur non ex nec aliquam. Sed vel tellus aliquet, laoreet mi eget, finibus dui. Mauris dictum dui vitae turpis maximus, rutrum tempus lacus euismod.

Nam hendrerit tellus id erat egestas, a venenatis libero condimentum. Nulla volutpat arcu diam, vitae elementum metus convallis ac. Nunc luctus elit elit, finibus iaculis lacus consectetur non. Nam dictum sollicitudin libero. Sed sed quam sit amet justo mollis laoreet. Nullam ornare, odio nec egestas ornare, eros leo condimentum eros, et dapibus dui quam id dui. Phasellus hendrerit, mi vel sodales feugiat, nisl lorem rutrum ligula, quis dictum justo felis sit amet nisi. Aenean elementum purus mi, aliquam suscipit odio interdum ut. Aenean ornare hendrerit tempus. Aliquam semper finibus dui, ac fringilla mi gravida sed. Vestibulum sit amet nulla risus.

Sed aliquet sapien nibh, quis auctor ligula dictum sit amet. Aliquam erat volutpat. Praesent a efficitur ex. Sed bibendum id tellus ut sollicitudin. Integer eu varius nisl. Donec et urna arcu. Duis ut vulputate quam.
</div></body></html>

24-06-2021, 01:42:40

#9

aliyanar

Onur89TR adlı üyeden alıntı: mesajı görüntüle

<html><head>
<style>
.dnmdiv{ height: 100vh; overflow: hidden; }
</style>
</head><body>
<div class="dnmdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod justo sed lacus vestibulum, vel sollicitudin libero blandit. In luctus hendrerit risus non varius. Suspendisse ipsum odio, consectetur et suscipit sed, volutpat quis lectus. Vestibulum eu nulla dictum, molestie mauris sed, ultricies lorem. Nam mi ipsum, accumsan sed felis vitae, placerat suscipit diam. Donec egestas faucibus rhoncus. Proin porta, libero malesuada fringilla pretium, tellus orci auctor mi, eget venenatis ex massa non dolor.

Nulla in lacus erat. Suspendisse pulvinar justo risus, nec dapibus orci tincidunt in. Sed gravida dapibus lectus in efficitur. Sed a sem vel elit pharetra imperdiet in placerat orci. Maecenas vitae enim vel enim semper pellentesque. In metus quam, dictum hendrerit tellus eget, blandit ultricies massa. Fusce id pharetra odio, eget convallis lectus. Suspendisse condimentum, elit eu consectetur pretium, lacus leo accumsan ipsum, quis ornare tellus turpis iaculis urna. Vivamus efficitur non ex nec aliquam. Sed vel tellus aliquet, laoreet mi eget, finibus dui. Mauris dictum dui vitae turpis maximus, rutrum tempus lacus euismod.

Nam hendrerit tellus id erat egestas, a venenatis libero condimentum. Nulla volutpat arcu diam, vitae elementum metus convallis ac. Nunc luctus elit elit, finibus iaculis lacus consectetur non. Nam dictum sollicitudin libero. Sed sed quam sit amet justo mollis laoreet. Nullam ornare, odio nec egestas ornare, eros leo condimentum eros, et dapibus dui quam id dui. Phasellus hendrerit, mi vel sodales feugiat, nisl lorem rutrum ligula, quis dictum justo felis sit amet nisi. Aenean elementum purus mi, aliquam suscipit odio interdum ut. Aenean ornare hendrerit tempus. Aliquam semper finibus dui, ac fringilla mi gravida sed. Vestibulum sit amet nulla risus.

Sed aliquet sapien nibh, quis auctor ligula dictum sit amet. Aliquam erat volutpat. Praesent a efficitur ex. Sed bibendum id tellus ut sollicitudin. Integer eu varius nisl. Donec et urna arcu. Duis ut vulputate quam.
</div></body></html>

Konuyla ne ilgisi var resim galerisinin anlamadım?