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/Cómo-diagnosticar-problemas-con-javascript-.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/Cómo-comprobar-un-sitio-web-para-un-Bug-JavaScript-.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/Cómo-utilizar-el-Desplazamiento-de-texto-en-Javascript-.html">Cómo utilizar el Desplazamiento de texto en Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Java-script-Vs---PHP-.html">Java script Vs . PHP </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-llegar-a-un-Thickbox-Jquery-.html">Cómo llegar a un Thickbox Jquery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Embellecedores-de-código-para-JavaScript-.html">Embellecedores de código para JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-reemplazar-un-IFrame-en-JavaScript-.html">Cómo reemplazar un IFrame en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-una-pelota-que-rebota-Animación-información-.html">Cómo hacer una pelota que rebota Animación información </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-una-entrada-Casilla-de-verificación-con-JavaScript-.html">Cómo agregar una entrada Casilla de verificación con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-validar-una-cadena-de-fecha-en-jQuery-.html">Cómo validar una cadena de fecha en jQuery </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/Cómo-comprobar-un-número-entero-de-entrada-en-JavaScript-.html" >Cómo comprobar un número entero de entrada en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-importar-VMWare-disco-en-VirtualBox-.html" >Cómo importar VMWare disco en VirtualBox </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-desplazarse-hacia-abajo-en-JavaScript-.html" >Cómo desplazarse hacia abajo en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/¿Qué-dice-la---A---Symbol-media-en-Javascript-.html" >¿Qué dice la ' A ' Symbol media en Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Acerca-de-la-salida-de-datos-JSON-con-JavaScript-.html" >Acerca de la salida de datos JSON con JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Códigos-de-PHP-en-JavaScript-Sintaxis-.html" >Códigos de PHP en JavaScript Sintaxis </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/Cómo-acceder-a-atributos-de-elemento-con-JavaScript-.html" >Cómo acceder a atributos de elemento con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-establecer-el-ancho-y-el-alto-de-un-iFrame-.html" >Cómo establecer el ancho y el alto de un iFrame </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Información-sobre-la-programación-del-Palm-OS-.html" >Información sobre la programación del Palm OS </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-la-entrada-de-texto-con-javascript-.html" >Cómo cambiar la entrada de texto con javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-integrar-Windows-Media-Player-en-Javascript-.html" >Cómo integrar Windows Media Player en Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ocultar-la-barra-de-direcciones-de-JavaScript-.html" >Cómo ocultar la barra de direcciones de JavaScript </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>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 