Se solicita Efecto scrollbar de airbnb

  • Autor Autor juanze
  • Fecha de inicio Fecha de inicio
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

juanze

juanze

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Retroalimentación: +7 / =0 / -0
Precio
$25 USD
Formas de pago
  1. Binance
Método de entrega
Sin intermediario
Plazo para pagar
Máximo 1 día
Plazo de entrega
Máximo 1 día
Comisiones
No existen
buenas gente, tengo una web donde quiero aplicar un efecto que tiene airbnb en su web.

Necesito que se solucione hoy el problema.
Es todo React + tailwind

presupuesto: 25 usd

adjunto video de el efecto necesario:


demo actual:

Cronos Capital

Welcome to Cronos Capital, your premier destination for all things real estate. Explore a wide range of high-quality properties for sale.
cronoscapital.group cronoscapital.group
 
Última edición:
Intenta con css y html te dejo el código para que lo ajustes :
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
margin: 0;
height: 100vh;
overflow: hidden;
}

.content {
flex-grow: 1;
overflow-y: scroll;
padding: 20px;
box-sizing: border-box;
}

.sidebar {
width: 250px;
background-color: #f8f9fa;
border-left: 1px solid #dee2e6;
padding: 20px;
box-sizing: border-box;
position: relative;
}
</style>
</head>
<body>
<div class="content">
<h1>Contenido Principal</h1>
<p>Este es el contenido principal de la página...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel mauris nec velit suscipit commodo...</p>
<!-- Añade más contenido para que el scroll sea visible -->
</div>
<div class="sidebar">
<h2>Barra Lateral Fija</h2>
<p>Este contenido permanecerá fijo en el lado derecho de la página.</p>
</div>
</body>
</html>
 
Neburors dijo:
Intenta con css y html te dejo el código para que lo ajustes :
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
margin: 0;
height: 100vh;
overflow: hidden;
}

.content {
flex-grow: 1;
overflow-y: scroll;
padding: 20px;
box-sizing: border-box;
}

.sidebar {
width: 250px;
background-color: #f8f9fa;
border-left: 1px solid #dee2e6;
padding: 20px;
box-sizing: border-box;
position: relative;
}
</style>
</head>
<body>
<div class="content">
<h1>Contenido Principal</h1>
<p>Este es el contenido principal de la página...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel mauris nec velit suscipit commodo...</p>
<!-- Añade más contenido para que el scroll sea visible -->
</div>
<div class="sidebar">
<h2>Barra Lateral Fija</h2>
<p>Este contenido permanecerá fijo en el lado derecho de la página.</p>
</div>
</body>
</html>
Hacer clic para expandir...
no me estaria funcionando, si quieres te agrego al repo y lo puedes revisar.
 
Ok 😉
 
aún necesitas ayuda?
 
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

Atrás
Arriba