js veya Jquery - kaydırılabilir div görüntülenebilir alanı elde

Question

Şu anda dinamik olarak doldurulmuş kaydırılabilir bir div var.
Ben ne yapmak istediğinizi uparrow ve downarrow basılmasını yakalar ve her seferinde (temelde bu seçkin girdi taklit) İşte

seçilen bir çocuk yapma üst div içinde sınıfları değiştiren bir işlevi olduğunu vardır: En son "seçili" çocuğu göstermek için div'in görüntülenebilir alanına (aşağı yukarı veya yukarı) ihtiyacım var, ancak bu çocuk zaten ebeveynin görüntülenebilir alanında değilse. Ayrıca

...

Yani ben bir şekilde ana div scrollHeight ilişkin görüntülenebilir alanı elde etmek gerek ... ama bunu nasıl emin değilim, ben nasıl ayarlanacağını emin değilim Ebeveyn divun görüntülenebilir alanı.

Herhangi bir yardım çok takdir edilecektir!

Answer 1

size Doh verecektir

İlk anladım ben aracılığıyla görüntülenebilir alanı olsun

ViewableTop ile viewableBottom arasında görüntülenebilir bir şey olması için

. Ama gerçekten bunu bilmenize gerek yok. Bunun yerine

//getting child position within the parent 
var childPos = $("#childDiv").position().top; 
//getting difference between the childs top and parents viewable area 
var yDiff = ($("#childDiv").position().top + $("#childDiv").outerHeight()) - $("#parentDiv").innerHeight() 

aşağıdaki bilmek gerekir ardından

//if upArrow and childPosition is above viewable area (that's why it goes negative) 
if(event.keyCode == 38 && childPos < 0) 
    $("#parentDiv").scrollTop += childPos;//add the negative number to the scrollTop 
//if downArrow and the difference between childs top and parents viewable area is greater than the height of a childDiv 
else if(event.keyCode == 40 && yDiff > $("#childDiv").outerHeight()-1) 
    $("#parentDiv").scrollTop += yDiff;//add the difference to the parents scrollTop 

Answer 2

jQuery kullanıyorsanız, position() kullanarak konumlandırılmış ana öğeye göre bir öğenin konumunu alabilirsiniz. Kaydırılabilir div, konumlandırmak için göreceli/mutlak konumlandırmaya ayarlanabilir.

Ayrıca kaydırma konumunu değiştirmek için scrollTop özelliğini değiştirebilirsiniz. Veya jquery scrollTop(pos).

Answer 3

Eğer iç div scrollTop almak için outter div yüksekliğini eklemem gerekiyor ve bu görüntülenebilir ölçülerinden