Encontrar la position del elemento en el desplazamiento del browser

Necesito ayuda para encontrar la position de los elementos. Estoy trabajando en un lector de libros electrónicos, también es todo Html con CSS. Todo html seccionado página por página, y tengo que encontrar un elemento como este

<span name="Note" style="background-color:rgb(255,255,204)">Example</span>

Todo el mundo sugiere un código como este;

 function position(elem) { var left = 0, top = 0; do { left += elem.offsetLeft; top += elem.offsetTop; } while ( elem = elem.offsetParent ); return [ left, top ]; }position(document.getElementsByName('Note')[0]); 

pero no funciona para mí; Necesito la position real del elemento en desplazamiento con JavaScript.

4 Solutions collect form web for “Encontrar la position del elemento en el desplazamiento del browser”

 var note = document.getElementsByName('Note')[0]; var screenPosition = note.getBoundingClientRect(); 

El ClientRect devuelto por getBoundingClientRect() tiene valores para .top , .left , .right , .bottom , .width y .height .

Estas son posiciones de píxeles en la window visible; a medida que desplaza la página, los valores .top y .bottom cambiarán, e incluso pueden volverse negativos a medida que el elemento se desplaza por la parte superior de la vista.

Tenga en count que, a diferencia de la solución que acumula offsetLeft / offsetTop esta solución representa correctamente los bordes y el relleno en el body y los elementos html en todos los browseres (Firefox).

Vea este caso de testing: http://jsfiddle.net/QxYDe/4/ (recorra la página y observe cómo cambian los valores).

También es compatible con Internet Explorer .

Supongo que necesitas que la nota permanezca fija en la esquina superior izquierda todo el time. Incluso cuando se desplaza?

¡Puedes hacer esto solo con CSS! 🙂

HTML:

 <div id="Note" name="Note">Example</div> 

CSS:

 div #Note { background-color:rgb(255,255,204) left: 0px; position: absolute; top: 0px; z-index: 999; } @media screen { body > div #Note { position: fixed; } } 

EDITAR: con varias notas (no probadas):

HTML:

 <div id="Note1">Example</div> <div id="Note2">Example</div> <div id="Note3">Example</div> <div id="Note4">Example</div> 

CSS:

 div #Note1 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 0px; z-index: 999; } div #Note2 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 20px; z-index: 999; } div #Note3 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 40px; z-index: 999; } div #Note4 { background-color:rgb(255,255,204) left: 0px; height: 20px; position: absolute; top: 60px; z-index: 999; } @media screen { body > div #Note1 { position: fixed; } body > div #Note2 { position: fixed; } body > div #Note3 { position: fixed; } body > div #Note4 { position: fixed; } } 
 function position( document.getElementsByName('Note')[0]) { var left = 0, top = 0; do { left += elem.offsetLeft-elem.scrollLeft; top += elem.offsetTop-elem.scrollTop; } while ( elem = elem.offsetParent ); return [ left, top ]; } 

Reste las posiciones de desplazamiento.

Solución:

  <script>function showDiv() { var div = document.getElementById('comdiv'); var button = document.getElementById('button'); if (div.style.display !== "none") { div.style.display = "none"; button.value = "Add Comments"; } else { button.value = "Hide Comments"; div.style.display = "block"; } var note = document.getElementsByName("comment")[0]; var screenPosition = note.getBoundingClientRect(); window.scrollTo(screenPosition); }</script> <form name="form" id="form" action="" method="post"> <textarea name="comment" id="comment" placeholder="Write Comment, Max: 140 characters" rows="4" class="width-50" onblur="checkMe()" ></textarea> <input type="text" class="input-small width-33" name="name" id="name" placeholder="Name" autofocus class="width-33" onblur="checkMe()" /> <button type="submit" name="submit" id="submitbutton" class="btn btn-green btn-outline" disabled="disabled">Post Comment</button> </form> 
  • En desbordamiento, crea un nuevo div y transfiere el text de desbordamiento al nuevo div
  • identificación dinámica ng-repeat
  • Mostrar label de input (control de textbox) con formatting de dos dígitos en HTML5
  • ¿Cómo puedo eliminar el borde blanco del gráfico circular HighCharts?
  • ¿Cómo llamar a la function mfc C ++ en HTML JavaScript y cómo llamar a la function JavaScript en mfc C ++?
  • El selector JQuery sigue funcionando después de eliminar la class?
  • Cómo calcular el ancho total del text incluyendo el rumbo izquierdo y derecho
  • Python envía tags con requestes
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.