Mobile Horizontal Scroll in Webflow using Overflow Auto

Поділитися
Вставка
  • Опубліковано 24 січ 2025

КОМЕНТАРІ • 32

  • @HowToDrip
    @HowToDrip Рік тому +2

    To the point without fluff. Nice. Thanks.

  • @yuzhuhiko
    @yuzhuhiko 8 місяців тому +1

    Your advices are clear and direct. Absolutely 💯 awesome

    • @dereksiuau
      @dereksiuau  8 місяців тому

      Awesome 💯 Glad you found value!

  • @s.d.3525
    @s.d.3525 9 місяців тому

    Brother, your tutorials are great. Straight to the point, thank you alot!

    • @dereksiuau
      @dereksiuau  9 місяців тому

      Thanks for watching and commenting brother!

  • @mrfoxtrot1824
    @mrfoxtrot1824 8 місяців тому +2

    Very helpful, thank you!

    • @dereksiuau
      @dereksiuau  8 місяців тому

      Thanks for watching and glad you found it helpful!

  • @deogratiusrobert5923
    @deogratiusrobert5923 10 місяців тому +1

    Thanks Derek

    • @dereksiuau
      @dereksiuau  10 місяців тому

      No problem! Thanks for watching and commenting.

  • @jademason7233
    @jademason7233 11 місяців тому +1

    Helpful! Thank you :)

  • @leszeksmieszek4523
    @leszeksmieszek4523 3 місяці тому +1

    Great tutorial, dude! You made it look simple. One question - do you know how to make each swipe moving exactly one card, and making it bigger when on screen? Thanks!

    • @dereksiuau
      @dereksiuau  3 місяці тому

      @@leszeksmieszek4523 That functionality can be done through Swiper JS.

  • @FrenchyJayM
    @FrenchyJayM Рік тому +1

    Thanks ! Super helpful !
    Do you know how to center the grid content upon loading the page ?
    I have 3 cards in a one-row grid and looking for having the card in the middle to be seen in first. Horizontal scroll is working on the right but not on the left.

    • @dereksiuau
      @dereksiuau  11 місяців тому

      That is a fantastic question. Not sure how to do that besides using Swipe.JS

  • @bultenbouwkranen
    @bultenbouwkranen Рік тому +1

    Very handy, thank you! Is it possible to make the horizontal scroll automatically scroll?

    • @dereksiuau
      @dereksiuau  Рік тому

      Glad you found it handy. Yes there is :) - I have just released a new tutorial outlining the premise of this. But essentially you can add on page load interaction and move the cards.

  • @almister999
    @almister999 Рік тому +1

    The example you show at the start has a custom-styled scroll bar. Any idea how to do that? Thanks :)

    • @dereksiuau
      @dereksiuau  Рік тому +1

      Yes you can apply custom code. Here is a good plugin to do this:
      ua-cam.com/video/8FgRiNqv2PU/v-deo.html

    • @almister999
      @almister999 Рік тому +1

      @@dereksiuau Hey, thanks for the fast reply! Another question for you... do you know of a way to have that automatically scrolling (horizontally) and then maybe stop when you have your mouse on it, or interactive with it on mobile.
      Thanks again, I subbed :)

    • @dereksiuau
      @dereksiuau  Рік тому

      @@almister999 Yes I do - you will have to create a move interaction (another technical term is: scrolling marquee) you commonly see this with logos. I plan to release a video of this soon, but if you can't wait you can look up marquee tutorial on Webflow.
      Thanks for the sub.

  • @nickbarry659
    @nickbarry659 9 місяців тому

    Any idea how to make the scrollbar across the bottom full width?
    I'd love it to have the same 16px indent on either size, right now it looks a little broken spanning full-width. Thanks!

    • @dereksiuau
      @dereksiuau  9 місяців тому

      Hey Nick, If i understand you correctly you want the scroll bar to have 16px indent or lets say (90% width) and have the content to be 100% width, if this is the case the overflow auto scroll bar only matches the width of the div.
      If you want it different sizes you will need to go through a custom solution such as using Swiper.JS. If I misunderstood this question I apologise can you shed some more light perhaps providing a read only link?

  • @AlexReyes-d8g
    @AlexReyes-d8g 4 місяці тому

    Hi! I did this but somehow, it won't work on ios devices. It works with android and desktops tho, could you help me?

    • @dereksiuau
      @dereksiuau  4 місяці тому +1

      It should work on both! Send me your read-only link and I can take a look for you when I get the chance.

  • @Emikhfd
    @Emikhfd 3 місяці тому

    I did everything the same way and it does not work

    • @dereksiuau
      @dereksiuau  2 місяці тому +1

      Oh no, sorry to hear. I understand it can frustrating. Did you end up resolving this?

  • @mirkotocco2131
    @mirkotocco2131 Рік тому

    I am not sue why but this dose not work for me

    • @dereksiuau
      @dereksiuau  Рік тому

      Can you send me your read-only link so I can take a look for you!

  • @Julijacreates
    @Julijacreates Рік тому +1

    its funny how everything seems so simple but never working when you actually trying to do it on ur own page.

    • @dereksiuau
      @dereksiuau  Рік тому

      Hahaha - did you end up figuring it out?