La propiedad Element.scrollTop obtiene o establece el número de pixels que el contenido de un elemento ha sido desplazado (enrollado) hacia arriba. El scrollTop de un elemento es una medida de la distancia desde el límite superior de un elemento al límite superior de su contenido visible. Cuando un elemento no genera una barra de scroll vertical, el valor de su scrollTop es establecido por defecto a 0.
// Obtiene el número de pixels desplazadosvar intElemScrollTop = someElement.scrollTop;
Después de ejecutar este código, intElemScrollTop es un entero que corresponde al número de pixesl que el contenido del element ha sido desplazado hacia arriba.
// Establece el número de pixels desplazados
element.scrollTop = intValue;
scrollTop puede ser establecido a cualquier valor entero, con ciertas salvedades:
Si el elemento no puede ser desplazado (p.e. no tiene desbordamiento (overflow) o si el elemento no es desplazable (non-scrollable), scrollTop es establecido a 0.
Si se asigna un valor menor que 0, scrollTop es establecido a 0.
Si se asigna un valor mayor que el máximo al que el contenido puede ser desplazado, scrollTop es establecido al valor máximo.
<divid="offsetContainer"style="margin: 40px 50px 50px;background-color:rgb(255, 255, 204);border: 4px dashed black;color: black;position: relative;display: inline-block;"><divid="idDiv"style="margin: 24px 29px;border: 24px black solid;padding: 0px 28px;width: 199px;height: 102px;overflow: auto;background-color: white;font-size: 13px!important;font-family: Arial, sans-serif;"><pid="PaddingTopLabel"style="text-align: center;font-style: italic;font-weight: bold;font-size: 13px!important;font-family: Arial, sans-serif;margin: 0px;">padding-top</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><pid="PaddingBottomLabel"style="text-align: center;font-style: italic;font-weight: bold;font-size: 13px!important;font-family: Arial, sans-serif;margin: 0px;">padding-bottom</p></div><strongstyle="color: blue;font-family: arial,sans-serif;font-size: 13px!important;font-weight: bold;left: -32px;position: absolute;top: 85px;">Left</strong><strongstyle="color: blue;font-family: arial,sans-serif;font-size: 13px!important;font-weight: bold;left: 170px;position: absolute;top: -24px;">Top</strong><strongstyle="color: blue;font-family: arial,sans-serif;font-size: 13px!important;font-weight: bold;left: 370px;position: absolute;top: 85px;">Right</strong><strongstyle="color: blue;font-family: arial,sans-serif;font-size: 13px!important;font-weight: bold;left: 164px;position: absolute;top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em></div>