Desde JavaScript es un lenguaje del lado del cliente que se ejecuta en el navegador común , que puede ser empleado para mostrar las páginas web interactivas . JavaScript se puede utilizar para controlar las funciones de ventana barra de desplazamiento de una página web. De hecho , es posible crear una ventana pop -up que no tiene barras de desplazamiento en absoluto por el uso de JavaScript . A fin de que JavaScript ofrecer este nivel de interactividad sin embargo, debe estar vinculada a los dos archivos CSS y JavaScript . Instrucciones
1
Abra su aplicación de edición de HTML y declarar 2 divs en el documento denominado " barra de desplazamiento " y "Scroll ". Div son etiquetas que definen las divisiones lógicas en las páginas web de un contenido de la página web y se puede agregar la misma manera que se agregan tablas y celdas de tablas . Los elementos de la primera barra de desplazamiento en la página HTML debe ser similar a esto:
html head
Control Scrollbars con JavaScript < /azulejo > < /head> <body> ... <div id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... coloque el contenido de desplazamiento aquí ... < /div > < /div > <script type="text/javascript"> <- ScrollLoad ( " scrollholder ", " desplazamiento ", true ) ;//- . > < /script > ... < /body> <br> <p> Coloque el contenido de la página web en los 2 divs <br> 2 <p> Declarar los archivos CSS y JavaScript en la cabecera de la página HTML de la siguiente manera : <br> <p> <head> ... link rel tipo "stylesheet " = = "text /css" = " scroll.css " mce_href = " scroll.css < href "media =" pantalla de proyección "/> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"> < /script> ... < /head> <br> <p> lugar los elementos de la segunda y otras barras de desplazamiento en la página HTML de la siguiente manera : <br> <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... coloque el contenido de desplazamiento aquí ... < /div > < /div > <script type="text/javascript"> <- ScrollLoad ( " scrollholder2 ", " Scroll2 " , false) ;//-> < /script> ... <br> 3 <p> Crear el archivo " Scroll.js " y copiar el código siguiente en el archivo : <br> <p> /* número de objetos desplazamiento * /document.No = 0 ; <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( "Opera ") > -1 ) ; <br> función <p> ScrollLoad (Area , contenido , SettingTracSize ) { var code = "var scroller " document.No + + " = new dw_scrollObj ( Area, contenido, Contenido , Area, document.No ) ; " ; if ( SettingTracSize ) Código + = " scroll " + documento . No + " setBarSize (); ". ; eval ( código ) ; makeMouseWheeleScrolling ( Area) ; document.No + + ;} <br> <p> /* <Mouse wheele scrolling> * /var mouseWheelTimer = 0 ; <br> <p> función makeMouseWheeleScrolling ( objName ) { var obj = document.getElementById ( objName ) ; <br> <p> if ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , rueda , false) ;} obj.onmousewheel = rueda; } <br> <p> moveUp función ( padre) { dw_scrollObj.initScroll ( parent.id , "arriba" ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + "' ) ; " , 200) ;} <br> <p> moveDown función ( padre) { dw_scrollObj.initScroll ( parent.id , " abajo " ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' "+ parent.id + "' ) " , 200) ;} <br> <p> mouseStop función ( parentid ) { dw_scrollObj.stopScroll ( parentid ) ; mouseWheelTimer = 0 ;} <br> funciones de la rueda del ratón <p> /* para desplazarse en el ratón efect rueda sobre objeto con mi barra de desplazamiento tirador js * /function (delta , padre ) { var s = delta + " :"; if ( delta < 0 ) { if ( isOpera ) moveUp (padre ) ; elsemoveDown (padre ) ;} else { if ( isOpera ) moveDown (padre ) ; elsemoveUp (padre ) ;} } <br> <p> rueda de función ( evento) { var delta = 0 ; (! caso ) si event = window.event ; if ( event. wheelDelta ) { delta = event.wheelDelta/120 ; if ( window.opera ) = delta -delta ; } else if ( event.detail ) { delta = - event.detail /3 ;} if ( delta) mango (delta , esta ) ;} /* < rueda de desplazamiento /ratón > * /<br> 4 <p> aseguren que todos sus archivos se guardan en la misma carpeta y ejecutar la página HTML para probar <br> < br . > <br>
<div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/91225.html' >Cómo diagnosticar problemas con javascript </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/91227.html' >Cómo comprobar un sitio web para un Bug JavaScript </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90883.html">Cómo obtener el ID de un objeto en jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90971.html">Cómo crear un borde parpadeante en DIV </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91115.html">Cómo hacer esquinas curvas Javascript para IE </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/283021.html">¿Cuáles son las diferencias entre sincronización y asincronización? </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90796.html">Cómo Graficar Con jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90933.html">Cómo editar una carta en Acajoom </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91181.html">Menús sencillos Dinámicas para un Sitio Web </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91234.html">Cómo crear elementos con JavaScript Client Side </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90967.html" >Cómo explotar una cadena con JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90979.html" >Cómo determinar si un sitio utiliza JavaScript redirecciones </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91150.html" >Cómo implementar un Destructor básico en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91205.html" >Instrucciones de Cómo activar JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91260.html" >Historia de Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91105.html" >Cómo cambiar una imagen de fondo en Rollover </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91207.html" >Cómo configurar el fondo de animación en una página Web </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91003.html" >Cómo llamar a funciones de PHP con jQuery </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90957.html" >OnMouseOver Styles </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90773.html" >JavaScript Vs . VBScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90772.html" >Javascript y expresiones regulares para Códigos postales </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90816.html" >Cómo usar jQuery para insertar un ancla </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimiento de la computadora © http://www.ordenador.online</div>
</div>
</body>
</html> 