Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

152
Views
¿Cómo puedo mostrar el desbordamiento x en automático y el desbordamiento y en visible?

en mi caso, quiero mostrar el desbordamiento en dirección horizontal para desplazarse o automático, pero en dirección vertical ... Quiero verlo sin desplazamiento. (Puede ser una imagen clara de esto). ¿Hay alguna forma de resolverlo con CSS o JavaScript?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

se supone que esa barra de desplazamiento no debe estar allí y, dado que ahora estamos usando javascript, use el evento de rueda para desplazarse y evitar la barra de desplazamiento, es el producto final, creo que lo que le gustaría tener

 const main = document.querySelector(".wrapper") main.addEventListener("scroll",e=>{ const subs = main.querySelectorAll(".nav > .each > .sub-menu") subs.forEach(sub=>{ let parent = sub.closest(".each"), parentX = parent.getClientRects()[0].x sub.style.left = parentX + "px" }) }) main.addEventListener("wheel",e=>{ e.preventDefault() let speed = 0.4 main.scrollBy(e.deltaY * speed,0) })
 .each:hover > .sub-menu {display: block !important;} .sub-menu{display: none;} .nav .sub-menu > .each > .sub-menu { left: 100%; top:0px; } .wrapper { width: 320px; overflow-x: hidden; overflow-y: hidden; } .title {width: max-content;} .each { background:white; cursor: pointer; } .each:hover {background:rgb(194, 194, 194);} .nav {border:1px solid black;}
 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="wrapper"> <div class="nav flex w-max"> <div class="each"><div class="title p-1 px-4 border-l">menu</div></div> <div class="each"><div class="title p-1 px-4 border-l">menu</div></div> <div class="each"> <div class="title p-1 px-4 border-l">with sub</div> <div class="sub-menu absolute border"> <div class="each"> <div class="title p-1 px-4">sub menu</div> <div class="sub-menu absolute border"> <div class="each"> <div class="title p-1 px-4 border-l">2nd sub</div> <div class="sub-menu absolute border"> <div class="each"><div class="title p-1 px-4 border-l">3rd sub</div></div> </div> </div> </div> </div> <div class="each"><div class="title p-1 px-4">2nd menu</div></div> <div class="each"><div class="title p-1 px-4">2nd menu</div></div> </div> </div> <div class="each"><div class="title p-1 px-4 border-l">menu</div></div> <div class="each"><div class="title p-1 px-4 border-l">menu</div></div> <div class="each"><div class="title p-1 px-4 border-l">menu</div></div> </div> </div>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!