Backup ข้อมูล MongoDB โดยใช้ mongo docker image — เรียนรู้เรื่องทำ Scroll เปลี่ยน Section

บทความนี้เจมส์จะเขียนเกี่ยวกับการทำ Scroll คือเมื่อเรา Scroll หนึ่งครั้งจะเปลี่ยนไปที่อีก Section ไปที่ Section ถัดไป ซึ่งจริง ๆ แล้วเราสามารถประยุกต์ใช้ได้หลากหลาย

สำหรับเจมส์ เจมส์เอามาประยุกต์ใช้ ทำคล้าย ๆ อันนี้ครับ https://www.tiktok.com/business/en

แต่ในบทความนี้เราไม่ได้เขียนขนาดนี้เน้อครับ จะเขียนแค่เปลี่ยนจาก Section1 => Section2 => Section3 เฉย ๆ เน้อครับ

มาเริ่มกันเลย

สร้างไฟล์ index.html มา แล้วใส่โค้ดดังนี้ครับ

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Example Scroll Sanpping</title>
    <style>
      html {
        scroll-snap-type: y mandatory;
      }
      body, h1 {
        margin: 0;
        color: white;
      }
      section {
        height: 100vh;
        scroll-snap-align: start;
      }
      section:nth-child(1) {
        background-color: red;
      }
      section:nth-child(2) {
        background-color: green;
      }
      section:nth-child(3) {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <section>
      <h1>Section 1</h1>
    </section>
    <section>
      <h1>Section 2</h1>
    </section>
    <section>
      <h1>Section 3</h1>
    </section>
  </body>
</html>

เมื่อ Double click ที่ไฟล์นี้จะพบว่าหน้าจะแสดงเป็น Section1 แล้วเมื่อ Scroll ลงมาไม่ต้องเยอะมาก มันก็จะแสดงเป็น Section2 ให้ แล้วเมื่อ Scroll ลงมาอีก มันก็จะแสดงเป็น Section3 ให้

พระเอกของงานนี้คือคำสั่ง scroll-snap-type: y mandatory; และ scroll-snap-align: start; ครับ

scroll-snap-type: y mandatory;

จะเป็นการบังคับให้เมื่อ Scroll แกน y (Scroll ลงมา) ต้องวิ่งไปที่ Snap point ทุกครั้ง

scroll-snap-align: start;

จะเป็นการกำหนดจุด Snap ให้ Snap ที่จุดเริ่มต้น ซึ่งในโค้ดเจมส์กำหนดค่านี้ที่ element section และแต่ละ section สูง 100vh (เต็มจอที่เปิด) ดังนั้นเมื่อเลื่อนลงมาเกินครึ่งของ section1 จะพบว่ามัน scroll ไปยัง section2 ให้เลย แต่ถ้าเลื่อนลงมาไม่เกินครึ่งนึงของ section1 มันก็จะ scroll กลับไปยังจุดเริ่มต้นของ section1 เหมือนเดิม

เพิ่มเติมให้นิดนึงครับ คือเมื่อเรา Scroll ไวๆมันจะเลื่อนไปจนถึง section3 ได้ ถ้าหากเราอยากแก้ปัญหาตรงจุดนี้ เราสามารถใช้คำสั่ง scroll-snap-stop: always; ใส่ด้านล่างคำสั่ง scroll-snap-align: start; ได้เลยครับ

จากที่เจมส์ลองมันช่วยได้ระดับนึง แต่ถ้า scroll ลงมาแรงมากๆ ก็ช่วยไม่ได้เหมือนกัน

หวังว่าบทความนี้จะมีประโยชน์กับคุณผู้อ่านไม่มากก็น้อยเน้อครับ หากส่วนไหนผิดพลาดประการใด ก็ขออภัยมา ณ ที่นี้ด้วยเน้อครับ

มาเริ่มกันเลย

scroll-snap-type: y mandatory;

scroll-snap-align: start;

Reference