JavaScript Scrolling: Scroll Events and Methods

Scrolling is a common action in web development, and JavaScript provides multiple ways to control, detect, and manipulate scrolling behavior.

🔹 1. Detect Scroll Events (`scroll`)

The scroll event fires whenever the user scrolls a page or an element.

✔ Example: Detect Page Scroll

window.addEventListener("scroll", function () {
    console.log("User is scrolling...");
});

🛠 Effect: Logs a message whenever the user scrolls.

🔹 2. Get Scroll Position

We can retrieve the current scroll position of the page using window.scrollY and window.scrollX.

✔ Example: Get Vertical and Horizontal Scroll Position

window.addEventListener("scroll", function () {
    console.log("Vertical Scroll:", window.scrollY);
    console.log("Horizontal Scroll:", window.scrollX);
});

🔹 window.scrollY → Returns vertical scroll position.
🔹 window.scrollX → Returns horizontal scroll position.

🔹 3. Scroll to a Specific Position

We can programmatically scroll the page using scrollTo().

✔ Example: Scroll to the Top

window.scrollTo(0, 0);

✔ Example: Scroll to a Specific Position Smoothly

window.scrollTo({
    top: 500,
    behavior: "smooth" // Smooth scrolling effect
});

🔹 behavior: "smooth" → Enables smooth scrolling.

🔹 4. Scroll by a Certain Amount

We can scroll relative to the current position using scrollBy().

✔ Example: Scroll Down by 100px

window.scrollBy({
    top: 100,
    behavior: "smooth"
});

✔ Example: Scroll Left by 50px

window.scrollBy({
    left: 50,
    behavior: "smooth"
});

🔹 5. Scroll an Element (Not the Whole Page)

We can scroll inside a specific element using .scrollTop and .scrollLeft.

✔ Example: Get Scroll Position of an Element

let box = document.getElementById("scrollBox");
console.log("Scroll Position:", box.scrollTop);

✔ Example: Scroll to Bottom of an Element

box.scrollTop = box.scrollHeight;

✔ Example: Scroll an Element Smoothly

box.scrollTo({
    top: 100,
    behavior: "smooth"
});

✅ HTML Example with Scrollable Div

<div id="scrollBox" style="width:300px; height:100px; overflow:auto; border:1px solid black;">
  <p>Content goes here...</p>
  <p>More content...</p>
  <p>Even more content...</p>
</div>
<button onclick="scrollToBottom()">Scroll to Bottom</button>

<script>
  function scrollToBottom() {
      let box = document.getElementById("scrollBox");
      box.scrollTop = box.scrollHeight;
  }
</script>

🔹 scrollHeight → The total scrollable height of an element.
🔹 scrollTop → The current vertical scroll position.

🔹 6. Smooth Scrolling with `scrollIntoView()`

We can scroll an element into view automatically.

✔ Example: Scroll an Element into View

document.getElementById("target").scrollIntoView({
    behavior: "smooth",
    block: "center"
});

🔹 behavior: "smooth" → Enables smooth scrolling.
🔹 block: "center" → Positions the element in the center of the viewport.

✅ HTML Example

<button onclick="scrollToElement()">Go to Section</button>
<div style="height:1000px;"></div> <!-- Just for spacing -->
<div id="target" style="height:100px; background-color:lightblue;">Target Section</div>

<script>
  function scrollToElement() {
      document.getElementById("target").scrollIntoView({ behavior: "smooth" });
  }
</script>

🔹 7. Prevent Page Scrolling

To disable scrolling on the page:

document.body.style.overflow = "hidden";

To enable scrolling again:

document.body.style.overflow = "auto";

🎯 Conclusion

✅ scrollY, scrollX → Get current scroll position.
✅ scrollTo() → Scroll to a fixed position.
✅ scrollBy() → Scroll relative to current position.
✅ scrollIntoView() → Bring an element into view.
✅ .scrollTop, .scrollLeft → Scroll inside an element.
✅ overflow: hidden → Disable scrolling.

🚀 Now you can control scrolling like a pro!

Souy Soeng

JavaScript Scrolling: Scroll Events and Methods