どうすればこの金額をスクロールすることができますか？ （メイン/セクション）

Question

メインタグに複数のセクションがあり、一度に1つだけ表示されます。メインは常に画面全体を占有することになります。つまり、50pxでスクロールできます。オーバーフローはautoに設定されます。 メインタグで金額をスクロールするにはどうすればよいですか？ セクションはコンテンツと同じくらい高いので、オーバーフローした場合は、私が考えるメインをスクロールします。 私はscrollYとoffsetTopを試みましたが、どれも動作していません。

var ifd = document.getElementById("info"), 
 
    main = document.getElementsByTagName("main")[0], 
 
    section = document.getElementsByTagName("section")[0]; 
 

 
main.onscroll = function() { 
 

 
    ifd.innerHTML = "ScrollY: " + section.scrollY; 
 
    ifd.innerHTML += "<br>ScrollY: " + main.scrollY; 
 
    
 
    ifd.innerHTML += "<br>OffsetTop: " + section.offsetTop; 
 
    ifd.innerHTML += "<br>OffsetTop: " + main.offsetTop; 
 

 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    color: #ccc; 
 
    font-family: roboto; 
 
} 
 

 
h2, 
 
p { 
 
    padding: 10px; 
 
} 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    background: #212121; 
 
    position: relative; 
 
} 
 

 
#info { 
 
    display: block; 
 
    min-height: 30px; 
 
    min-width: 50px; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    background: limegreen; 
 
    z-index: 10000; 
 
    border-radius: 3px; 
 
    padding: 5px; 
 
    color: black; 
 
} 
 

 
header { 
 
    height: 50px; 
 
    background: #000; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
main { 
 
    position: absolute; 
 
    top: 50px; 
 
    height: calc(100% - 50px); 
 
    left: 0; 
 
    right: 0; 
 
    overflow-Y: auto; 
 
} 
 

 
::-webkit-scrollbar { 
 
    width: 0px; 
 
} 
 

 
section { 
 
    width: 100%; 
 
}

<div id="info"></div> 
 

 
<header></header> 
 

 
<main> 
 

 
    <section> 
 
    <h2>Adieus except say barton put feebly favour him</h2> 
 

 
    <p>Of friendship on inhabiting diminution discovered as. Did friendly eat breeding building few nor. Object he barton no effect played valley afford. Period so to oppose we little seeing or branch. Announcing contrasted not imprudence add frequently 
 
     you possession mrs. Period saw his houses square and misery. Hour had held lain give yet.</p> 
 

 
    <p>Received overcame oh sensible so at an. Formed do change merely to county it. Am separate contempt domestic to to oh. On relation my so addition branched. Put hearing cottage she norland letters equally prepare too. Replied exposed savings he no viewing 
 
     as up. Soon body add him hill. No father living really people estate if. Mistake do produce beloved demesne if am pursuit.</p> 
 

 
    <p>No in he real went find mr. Wandered or strictly raillery stanhill as. Jennings appetite disposed me an at subjects an. To no indulgence diminution so discovered mr apartments. Are off under folly death wrote cause her way spite. Plan upon yet way 
 
     get cold spot its week. Almost do am or limits hearts. Resolve parties but why she shewing. She sang know now how nay cold real case.</p> 
 

 
    <p>He as compliment unreserved projecting. Between had observe pretend delight for believe. Do newspaper questions consulted sweetness do. Our sportsman his unwilling fulfilled departure law. Now world own total saved above her cause table. Wicket myself 
 
     her square remark the should far secure sex. Smiling cousins warrant law explain for whether.</p> 
 

 
    <p>She suspicion dejection saw instantly. Well deny may real one told yet saw hard dear. Bed chief house rapid right the. Set noisy one state tears which. No girl oh part must fact high my he. Simplicity in excellence melancholy as remarkably discovered. 
 
     Own partiality motionless was old excellence she inquietude contrasted. Sister giving so wicket cousin of an he rather marked. Of on game part body rich. Adapted mr savings venture it or comfort affixed friends.</p> 
 

 
    <p>Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. 
 
     Considered use dispatched melancholy sympathize discretion led. Oh feel if up to till like.</p> 
 

 
    <p>Ladyship it daughter securing procured or am moreover mr. Put sir she exercise vicinity cheerful wondered. Continual say suspicion provision you neglected sir curiosity unwilling. Simplicity end themselves increasing led day sympathize yet. General 
 
     windows effects not are drawing man garrets. Common indeed garden you his ladies out yet. Preference imprudence contrasted to remarkably in on. Taken now you him trees tears any. Her object giving end sister except oppose.</p> 
 

 
    <p>Resolution possession discovered surrounded advantages has but few add. Yet walls times spoil put. Be it reserved contempt rendered smallest. Studied to passage it mention calling believe an. Get ten horrible remember pleasure two vicinity. Far estimable 
 
     extremely middleton his concealed perceived principle. Any nay pleasure entrance prepared her.</p> 
 

 
    <p>Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully 
 
     am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed 
 
     in confined juvenile.</p> 
 

 

 
    </section> 
 

 
</main>

Answer 1

このお試しください：

var amountScroll = $(window).scrollTop() - $('main').offset().top; 

をそして、これはjavascriptのです：

var amountScroll = window.pageYOffset - document.getElementsByTagName("main")[0].offsetTop;