javascript - div - innerhtml jquery ejemplos
¿Cómo desplazarse a un elemento dentro de un div? (6)
Tengo un div desplazado y quiero tener un enlace cuando hago clic en él forzará este div para desplazarse para ver un elemento dentro. Escribí su JavasSript así:
document.getElementById(chr).scrollIntoView(true);
pero esto desplaza toda la página mientras desplaza el div mismo. ¿Cómo arreglar eso?
Quiero decirlo así
MyContainerDiv.getElementById(chr).scrollIntoView(true);
Necesita obtener el desplazamiento superior del elemento que desea desplazar hacia la vista, en relación con su elemento principal (el contenedor div desplazable):
var myElement = document.getElementById(''element_within_div'');
var topPos = myElement.offsetTop;
La variable topPos ahora está configurada a la distancia entre la parte superior del elemento div que se desplaza y el elemento que desea que esté visible (en píxeles).
Ahora le decimos al div que se desplace a esa posición usando scrollTop :
document.getElementById(''scrolling_div'').scrollTop = topPos;
Si está utilizando el prototipo JS framework, haría lo mismo así:
var posArray = $(''element_within_div'').positionedOffset();
$(''scrolling_div'').scrollTop = posArray[1];
De nuevo, esto desplazará el div para que el elemento que desea ver esté exactamente en la parte superior (o si eso no es posible, se desplazará lo más abajo posible para que esté visible).
Debería encontrar la posición del elemento en el DIV al que desea desplazarse y establecer la propiedad scrollTop.
divElem.scrollTop = 0;
Actualización :
Código de muestra para mover hacia arriba o hacia abajo
function move_up() {
document.getElementById(''divElem'').scrollTop += 10;
}
function move_down() {
document.getElementById(''divElem'').scrollTop -= 10;
}
Desplazamiento animado por el usuario
Aquí hay un ejemplo de cómo desplazar de forma programática un <div> horizontalmente, sin JQuery . Para desplazarse verticalmente, debe reemplazar las escrituras de JavaScript a scrollLeft con scrollTop , en su lugar.
JSFiddle
https://jsfiddle.net/fNPvf/38536/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it''s pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onmousedown="scroll(''scroller'',3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites//company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of ''d'' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onmousedown="scroll(''scroller'',-3, 10);" onmouseup="clearTimeout(TIMER_SCROLL);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll function.
@param id Unique id of element to scroll.
@param d Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scroll(id, d, del){
// Scroll the element.
document.getElementById(id).scrollLeft += d;
// Perform a delay before recursing this function again.
TIMER_SCROLL = setTimeout("scroll(''"+id+"'',"+d+", "+del+");", del);
}
Crédito a Dux .
Desplazamiento animado automático
Además, aquí hay funciones para desplazar un <div> completamente hacia la izquierda y hacia la derecha. Lo único que cambiamos aquí es que verifiquemos si se ha utilizado la extensión completa del desplazamiento antes de realizar una llamada recursiva para desplazar nuevamente.
JSFiddle
https://jsfiddle.net/0nLc2fhh/1/
HTML
<!-- Left Button. -->
<div style="float:left;">
<!-- (1) Whilst it''s pressed, increment the scroll. When we release, clear the timer to stop recursive scroll calls. -->
<input type="button" value="«" style="height: 100px;" onclick="scrollFullyLeft(''scroller'',3, 10);"/>
</div>
<!-- Contents to scroll. -->
<div id="scroller" style="float: left; width: 100px; height: 100px; overflow: hidden;">
<!-- <3 -->
<img src="https://cdn.sstatic.net/Sites//company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="image large" style="height: 100px" />
</div>
<!-- Right Button. -->
<div style="float:left;">
<!-- As (1). (Use a negative value of ''d'' to decrease the scroll.) -->
<input type="button" value="»" style="height: 100px;" onclick="scrollFullyRight(''scroller'',3, 10);"/>
</div>
JavaScript
// Declare the Shared Timer.
var TIMER_SCROLL;
/**
Scroll fully left function; completely scrolls a <div> to the left, as far as it will go.
@param id Unique id of element to scroll.
@param d Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyLeft(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft += d;
// Have we not finished scrolling yet?
if(el.scrollLeft < (el.scrollWidth - el.clientWidth)) {
TIMER_SCROLL = setTimeout("scrollFullyLeft(''"+id+"'',"+d+", "+del+");", del);
}
}
/**
Scroll fully right function; completely scrolls a <div> to the right, as far as it will go.
@param id Unique id of element to scroll.
@param d Amount of pixels to scroll per sleep.
@param del Size of the sleep (ms).*/
function scrollFullyRight(id, d, del){
// Fetch the element.
var el = document.getElementById(id);
// Scroll the element.
el.scrollLeft -= d;
// Have we not finished scrolling yet?
if(el.scrollLeft > 0) {
TIMER_SCROLL = setTimeout("scrollFullyRight(''"+id+"'',"+d+", "+del+");", del);
}
}
El código debería ser:
var divElem = document.getElementById(''scrolling_div'');
var chElem = document.getElementById(''element_within_div'');
var topPos = divElem.offsetTop;
divElem.scrollTop = topPos - chElem.offsetTop;
Desea desplazar la diferencia entre la posición superior del niño y la posición superior del div.
Obtenga acceso a elementos secundarios usando:
var divElem = document.getElementById(''scrolling_div'');
var numChildren = divElem.childNodes.length;
y así....
Si está utilizando jQuery, puede desplazarse con una animación usando lo siguiente:
$(MyContainerDiv).animate({scrollTop: $(MyContainerDiv).scrollTop() + ($(''element_within_div'').offset().top - $(MyContainerDiv).offset().top)});
La animación es opcional: también puede tomar el valor scrollTop calculado anteriormente y ponerlo directamente en la propiedad scrollTop del contenedor .
Para desplazar un elemento a la vista de un div, solo si es necesario, puede usar esta función scrollIfNeeded :
function scrollIfNeeded(element, container) {
if (element.offsetTop < container.scrollTop) {
container.scrollTop = element.offsetTop;
} else {
const offsetBottom = element.offsetTop + element.offsetHeight;
const scrollBottom = container.scrollTop + container.offsetHeight;
if (offsetBottom > scrollBottom) {
container.scrollTop = offsetBottom - container.offsetHeight;
}
}
}
document.getElementById(''btn'').addEventListener(''click'', ev => {
ev.preventDefault();
scrollIfNeeded(document.getElementById(''goose''), document.getElementById(''container''));
});
.scrollContainer {
overflow-y: auto;
max-height: 100px;
position: relative;
border: 1px solid red;
width: 120px;
}
body {
padding: 10px;
}
.box {
margin: 5px;
background-color: yellow;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
#goose {
background-color: lime;
}
<div id="container" class="scrollContainer">
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div id="goose" class="box">goose</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
<div class="box">duck</div>
</div>
<button id="btn">scroll to goose</button>