Pausing in Skrollr

Question

<div class="section" id="section1" data-0="transform:translate(0,0%);"></div>

<div class="section" id="section2" data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%);" data-150p="" data-200p="transform:translate(0, -100%);"></div>

<div class="section" id="section3" data-150p="transform:translate(0,100%);" data-200p="transform:translate(0,0%)" data-_box-200p="" data-_box-300p="transform:translate(0,-100%)">
     <div class="box" data-200p="width:0%;" data-_box-200p="width:100%"></div>
</div>

<div class="section" id="section4" data-_box-200p="transform:translate(0,100%);" data-_box-300p="transform:translate(0%,0%);" data-_box-400p="transform:translate(0%,-100%);"></div>

<div class="section" id="section5" data-_box-300p="transform:translate(0,100%);" data-_box-400p="transform:translate(0%,0%);" data-_box-500p="transform:translate(0%,-100%);"></div>

<div class="section" id="section6" data-_box-400p="transform:translate(0,100%);" data-_box-500p="transform:translate(0,0%);"></div>

I'm trying to pause a div. It's working but I'm getting a line after the section-3.

See the attached image:

.

JSfiddle

How to remove that line? (issue is only in chorme)

Thank you

Answer 1

I think that line is referring to the attribute you set for it.

<div class="section" id="section3" data-150p="transform:translate(0,100%);" data-200p="transform:translate(0,0%)" data-_box-200p="" data-_box-300p="transform:translate(0,-100%)">
     <div class="box" data-200p="width:0%;" data-_box-200p="width:100%"></div>
</div>

Your <div class="box" data-200p="width:0%;" data-_box-200p="width:100%"></div> has a width of 100% so it's going to go 100% across the page, and by default will be 1px in height.