Desplácese por contenidos DIV particulares con la barra de desplazamiento principal del navegador

6 minutos de lectura

Desplacese por contenidos DIV particulares con la barra de desplazamiento
rapaz

Estoy trabajando en un nuevo diseño de mi sitio y me encuentro GIZMODO sitio, descubrí que el sitio puede hacer uso de la barra de desplazamiento de la página para desplazar parte del contenido del sitio. ¿Cómo pueden hacerlo? Estudié su CSS a través de Firebug, pero estoy bastante confundido.

Aquí está mi página de prueba 1: http://raptor.hk/dev/theme/dummy.html (esta página puede centrar el contenido, pero no puede desplazarse como yo quiero)

Aquí está mi página de prueba 2: http://raptor.hk/dev/theme/dummy2.html (esta página se puede desplazar como yo quiera, pero no se puede centrar)

Solo quiero hacer que la página con el contenido del lado izquierdo se desplace con la barra de desplazamiento de la página, pero el contenido del lado derecho permanece en la posición original, además, todo el sitio debe alinearse en el centro, es decir, combinar mis páginas de prueba 1 y 2. ¿Alguien puede darme algunas luces? ?

  • Los enlaces compartidos están rotos, no funcionan.

    – Kamlesh

    23 ene.

  • oh, ya hace 9 años. Lo sentimos, el enlace ya no está disponible.

    – rapaz

    23 ene.

Desplacese por contenidos DIV particulares con la barra de desplazamiento
NGLN

Aunque su ejemplo de Gizmodo usa scripts adicionales para manejar (la barra de desplazamiento vertical de) la barra lateral (que incluso no funciona en todos los navegadores), el efecto es perfectamente posible con CSS puro e incluso no es tan difícil como parece. a primera vista.

Entonces quieres:

  • Un diseño centrado horizontalmente, posiblemente ampliado o reducido para diferentes tamaños de ventana del navegador,
  • El contenido principal a la izquierda que se puede desplazar verticalmente mediante la barra de desplazamiento principal del navegador,
  • Una barra lateral a la derecha que se adhiere a la parte superior de la ventana del navegador, se puede desplazar por separado del contenido principal y solo muestra su barra de desplazamiento cuando se pasa el mouse sobre ella. Cuando se desplaza hasta el final de la barra lateral, la barra de desplazamiento de la ventana toma el control.

Mira esto violín de demostración que hace todo eso.

La hoja de estilo:

html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

Y el marcado:

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

Probado en Win7 en IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

Asumí un ancho fluido para el contenido principal y un ancho estático para la barra lateral, pero ambos pueden ser perfectamente fluidos, como quieras. Si desea un ancho estático, consulte este violín de demostración lo que hace que el marcado sea más simple.

Actualizar

Si entiendo su comentario correctamente, entonces desea evitar el desplazamiento del contenido principal cuando el mouse está sobre la barra lateral. Por eso, la barra lateral puede no ser un elemento secundario del contenedor de desplazamiento del contenido principal (que era la ventana del navegador), para evitar que el evento de desplazamiento se transmita a su elemento principal.

pienso esto nuevo violín de demostración hace lo que quieres:

<div id="wrapper">
    <div id="content">
    </div>
</div>
<div id="sidebar">
</div>

  • El segundo violín de demostración está muy cerca. ¿Cómo hacer que la barra lateral derecha se desplace (pero no toda la página) cuando paso el mouse sobre la barra lateral derecha y me desplazo con la rueda del mouse? ¿Realmente tiene que ver con JavaScript?

    – rapaz

    07 ago.

  • Ver mi actualización. Y compara ese violín con Éste que tiene un comportamiento de salida del mouse ligeramente diferente de la barra lateral.

    – NGLN

    07 ago.

  • Estoy tratando de usar esto para arreglar la barra lateral. También necesito saber la posición de desplazamiento de la ventana. Sin embargo, siempre recibo un valor cero para window.pageYOffset cuando me desplazo. Por favor, hágame saber cómo conseguirlo.

    – bjskishore123

    24 mar. 17 en 08:56

  • @bjskishore123 No lo sé. Eso es algo para una nueva pregunta, supongo.

    – NGLN

    24 mar. 17 en 09:51

Entendí mal tu pregunta. Pensé que querías que la barra de desplazamiento principal también desplazara cosas en otro div. Bueno, aquí tienes:

$(function(){
    $(document).scroll(function(){
        $('#my_div').stop().animate({
            scrollTop : $(this).scrollTop()
        });            
    });
});

Manifestación: http://jsfiddle.net/AlienWebguy/c3eAa/

Puedes hacer esto con position:fixed. La parte relevante de la hoja de estilo de GIZMODO:

#rightcontainer {
    position: fixed;
    margin-bottom: 10px;
    width: 300px;
    height: 100%;
    top: 0;
}

  • Tengo otra pregunta, ¿qué pasa si tengo que hacer el centro de contenido? ¿Cómo puedo ajustar el CSS? (¿Ves el enlace recién actualizado en la pregunta?)

    – rapaz

    31 jul.

Esta técnica se ve en muchos sitios web hoy en día. lo que hacen es dar position: fixed al div en el lado derecho de la pantalla, por lo que no se ve afectado por el desplazamiento de la página.

CSS:

body {
   position: relative;
}
#leftSide {
  width: 600px;
  ...rules ...
}

#rightSide {
   position: fixed;
   left: 610px;
}

HTML:

<body>
<div id="leftSide">
   affected by scrolling
</div>

<div id="rightSide">
  Not affected by scrolling
</div>
</body>

Supongo que estás buscando algo como esto.

http://jsfiddle.net/RnWdh/

Tenga en cuenta que puede modificar el ancho de #main_content como desee, siempre que no vaya “detrás” de su menú fijo, ya que su texto desaparecerá.

El truco para colocar el menú fijo a la derecha en su contenedor centrado es usar left: 50% y margin-left para ajustarlo correctamente.

Por ejemplo. Usted tiene un container-ancho de 960px, y ancho de menú fijo de 300px, con left: 50%, habrá un espacio en blanco de (960/2 – 300 = 180) a la derecha del menú fijo. Entonces simplemente ajústelo con margin-left: 180px;

1644217387 530 Desplacese por contenidos DIV particulares con la barra de desplazamiento
Guillermo Niu

Una forma de “centrar” la página (es decir, contenido + panel derecho) es ajustar los márgenes mientras se fija la posición del panel derecho. Entonces, si tienes un div#content y un div#rightPanel, el CSS puede parecerse a:

#content {
    margin-left: 15%;   /* left page margin */
    margin-right: 25%;  /* right page margin + rightPanel's width */
}

#rightPanel {
    position: fixed;

    top: 0;
    right: 15%;  /* right page margin */
    width: 10%;
}

Sólo asegúrese de que el margen izquierdo de #content es lo mismo que el margen derecho de #rightPanel.

Aquí hay un ejemplo: http://jsfiddle.net/william/ZruS6/1/.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad