Html Question posted in
Some basic documentation can be found here.

Html – How to solve this strange scroll problem?

I wrote the following code using TailwindCSS and jQuery, but I found that the scroll functionality doesn’t work properly. However, when I open the browser’s console, the page height decreases, and at that point, my code works as expected. I’m not sure what’s causing this issue or how to properly fix it.

Here is the related demo GIF.
https://imgur.com/gfqyIQM
(The use of external images is due to the ongoing upload failures.😥)

I tried modifying parts of the code, but it didn’t help. It only works when the console is open (perhaps because the height decreases?). I’m hoping to achieve horizontal scrolling with the mouse wheel under normal conditions.

$('#imageContainer').on('wheel', function(event) {
  event.preventDefault();
  $(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY);
});
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.flex {
  display: flex;
}

.h-[60dvh] {
  height: 60dvh;
}

.w-[35dvh] {
  width: 35dvh;
}

.w-fit {
  width: fit-content;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="imageContainer" class="image-container w-[35dvh] h-[60dvh] bg-white mx-6 mt-6 overflow-x-scroll flex snap-x snap-mandatory scroll-smooth">
    <img src="https://via.placeholder.com/400x600/ff7f7f/333333?text=Image+1" alt="" class="snap-start">
    <img src="https://via.placeholder.com/400x600/7f7fff/333333?text=Image+2" alt="" class="snap-start">
    <img src="https://via.placeholder.com/400x600/7fff7f/333333?text=Image+3" alt="" class="snap-start">
  </div>
</body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I’ve resolved the issue, since my goal is to scroll one image per mouse wheel event, and to avoid discrepancies in the scroll value across different browsers (based on my testing, Chrome uses ±100 and Firefox uses ±126—though this might be specific to my device), I added a check that determines the scroll direction based solely on the sign of the scroll value. The actual scroll amount is set to the width of the image. This approach resolved the issue.

    $('#imageContainer').on('wheel', function(event) {
  event.preventDefault();
  //$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY);
  var x = event.originalEvent.deltaY > 0 ? $('img').width() : -$('img').width();
  $(this).scrollLeft($(this).scrollLeft() + x);
});
    .mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.flex {
  display: flex;
}

.h-[60dvh] {
  height: 60dvh;
}

.w-[35dvh] {
  width: 35dvh;
}

.w-fit {
  width: fit-content;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="imageContainer" class="image-container w-[35dvh] h-[60dvh] bg-white mx-6 mt-6 overflow-x-scroll flex snap-x snap-mandatory scroll-smooth">
    <img src="https://via.placeholder.com/400x600/ff7f7f/333333?text=Image+1" alt="" class="snap-start">
    <img src="https://via.placeholder.com/400x600/7f7fff/333333?text=Image+2" alt="" class="snap-start">
    <img src="https://via.placeholder.com/400x600/7fff7f/333333?text=Image+3" alt="" class="snap-start">
  </div>
</body>


  2. 0
    1. Force a layout recalculation on load You can simulate the same
      behavior that happens when you open the console (resize or layout
      reflow) by forcing a resize event or recalculating layout dimensions
      after the document is fully loaded.
    2. Adjust the mouse wheel event handler The scrolling might not work as
      expected because the deltaY value represents vertical scrolling by
      default. By switching to deltaX, you ensure that it correctly
      handles horizontal scrolling.

    example:

    $(window).on('load', function() {
  $(window).trigger('resize');
});

$('#imageContainer').on('wheel', function(event) {
  event.preventDefault();
  //$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY);
  $(this).scrollLeft($(this).scrollLeft() + (event.originalEvent.deltaY > 0 ? 100 : -100));
});

    $(window).on('load', function() {
  $(window).trigger('resize');
});

$('#imageContainer').on('wheel', function(event) {
  event.preventDefault();
  //$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY);
  $(this).scrollLeft($(this).scrollLeft() + (event.originalEvent.deltaY > 0 ? 100 : -100));
});
    .mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.flex {
  display: flex;
}

.h-[60dvh] {
  height: 60dvh;
}

.w-[35dvh] {
  width: 35dvh;
}

.w-fit {
  width: fit-content;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div id="imageContainer" class="image-container w-[35dvh] h-[60dvh] bg-white mx-6 mt-6 overflow-x-scroll flex snap-x snap-mandatory scroll-smooth">
    <img src="https://via.placeholder.com/400x600/ff7f7f/333333?text=Image+1" alt="" class="snap-start" class="snap-start w-[35dvh]">
    <img src="https://via.placeholder.com/400x600/7f7fff/333333?text=Image+2" alt="" class="snap-start" class="snap-start w-[35dvh]">
    <img src="https://via.placeholder.com/400x600/7fff7f/333333?text=Image+3" alt="" class="snap-start" class="snap-start w-[35dvh]">
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search