Prevent window vertical scroll, until div's horizontal scroll reaches its end

css disable scroll on div
prevent vertical scrolling while touch swiping
disable scroll css
scrollintoview
prevent page scroll on click
prevent scrolling of parent element
hide vertical scrollbar css
jquery disable scroll

I have a page that scrolls normal (vertically) and I'd like to have a div that scrolls horizontally on mousewheel down, then resumes vertical scrolling once the horizontal scrolling is done. Here's what I'm trying to accomplish.

  • Page scrolls normal (vertically)
  • Once I reach a the div #scroll, I'd like the page scrolling to stop and I'd like the content inside #scroll to scroll vertically
  • Once I scroll to the end of #scroll, I'd like the normal page scroll (vertically) to resume.

I have tried a few solutions but run in to the following problems

  • When I horizontal the #scroll content the vertical page scroll doesn't stop
  • When I stop the vertical scroll and get to the end of the horizontal scroll, I have to scroll like 50 times just to get out of that div.

Here's what I have so far...

var scroller = {};
scroller.e = document.getElementById("scroll");

if (scroller.e.addEventListener) {
    scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
    scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e;
    var delta = - 30 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

    var pst = $('#scroll').scrollLeft() + delta;

    if (pst < 0) {
        pst = 0;
    } else if (pst > $('.box-wrap').width()) {
        pst = $('.box-wrap').width();
    }

    $('#scroll').scrollLeft(pst);

    return false;
}


var toolbox = $('#scroll'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});
#wrap {
  max-width: 600px;
  margin: 0 auto;
}

#scroll {
    width: 600px;
    border: 1px solid #111;
    padding: 0px;
    margin: 0px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.box-wrap{
    padding: 0px;
    margin: 0px;
    height: 200px;
    width: 2040px;
}

.box {
    height: 200px;
    width: 200px;
    padding: 0px;
    background: #123;
    display: inline-block;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">

  <h1>asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>

  <div id="scroll">
    <div class="box-wrap">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>     
    </div>
  </div>

  <h1>asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>

</div>

You were almost there. Here's a blocker for your scroll:

$("#scroll").off("mousewheel").on("mousewheel", function(ev) {
  var el = $(ev.currentTarget);
  return ev.originalEvent.deltaY > 0
    ? el[0].scrollWidth - el.scrollLeft() <= el.innerWidth()
    : el.scrollLeft() === 0;
});

Updated pen. To watch them, use this logger in the mousewheel event:

console.log(
  'ev.originalEvent.deltaY:', ev.originalEvent.deltaY,
  '\nel[0].scrollWidth:',el[0].scrollWidth, 
  '\nel.scrollLeft():', el.scrollLeft(), 
  '\nel.innerWidth()',el.innerWidth()
);

Disable Scrolling with JavaScript, I want no scrolling what do I add where. Thanks. <div id="wpac-google-review">< /div> <script type="text/javascript"> wpac_init = window.wpac_init || []; max-height: 150px; overflow-y: scroll; this worked, but the scroll bar was not visible. although on mouse wheel movement the content was vertically scrolling. WebMachine December 19, 2017, 7:26pm

You need to use e.preventDefault() to avoid the screen to scroll vertically. However, it only needs to be applied when when the horizontal container allows more scrolling, to the left or to the right according to the scroll direction.

This will obviously only work when the scroll is performed over the horizontally scrollable element.

Implementation example (scroll down to test):

let scrollSpeed = 30;
let scroller = document.getElementById("scroll");

scroller.addEventListener("mousewheel", e=>{
  // block if e.deltaY==0
  if( !e.deltaY ) return;
  // Set scrollDirection (-1 = up // 1 = down)
  let scrollDirection = (e.deltaY > 0) ? 1 : -1;
  // convert vertical scroll into horizontal
  scroller.scrollLeft += scrollSpeed * scrollDirection;
  let scrollLeft = Math.round(scroller.scrollLeft);
  // calculate box total vertical scroll 
  let maxScrollLeft = Math.round( scroller.scrollWidth - scroller.clientWidth );
  // if element scroll has not finished scrolling
  // prevent window to scroll
  if( 
    (scrollDirection === -1  && scrollLeft > 0) ||
    (scrollDirection === 1 && scrollLeft < maxScrollLeft ) 
  ) e.preventDefault()
  // done!
  return true;
}, false);
#wrap {
  max-width: 600px;
  margin : auto;
}

.dummy-content{
  height: 400px;
  background: red
}

#scroll {
    overflow-x: scroll;
    overflow-y: hidden;
    margin :20px 0;
}

#scroll>div:first-child{
    height: 200px;
    width: 2040px;
    background-image: linear-gradient(to right ,red, yellow);
}
<div id="wrap">
<div class='dummy-content'></div>
  <div id="scroll">
      <div>
          <!-- Your horizontal content -->
      </div>
  </div>
  <div class='dummy-content'></div>
</div>

How To Hide Scrollbars With CSS, Add overflow: hidden; to hide both the horizontal and vertical scrollbar. To hide the scrollbars, but still be able to keep scrolling, you can use the following code� Worth noting on Kotaku is that there’s no ad at the very top of the main page, so when you first visit it there isn’t a jump. However, if the page ever loads while already scrolled down a way (such as after pressing the back button when you’ve finished reading an article), there is some massive, disorienting jumping caused by large ads peppered throughout the post stream.

https://codepen.io/anon/pen/oOgrEY

As Andrei Gheorghiu answer explain. It's just lacking:

e.preventDefault(); // << add this
e.stopPropagation(); // << add this

before return false;

var scroller = {};
scroller.e = document.getElementById("scroll");

if (scroller.e.addEventListener) {
  scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
  scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {
  // cross-browser wheel delta
  var e = window.event || e;
  var delta = -30 * Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));

  var pst = $("#scroll").scrollLeft() + delta;

  if (pst < 0) {
    pst = 0;
  } else if (pst > $(".box-wrap").width()) {
    pst = $(".box-wrap").width();
  }

  $("#scroll").scrollLeft(pst);
  e.preventDefault(); // << add this
  e.stopPropagation(); // << add this
  return false;
}

$("#scroll").off("mousewheel").on("mousewheel", function(ev) {
  var el = $(ev.currentTarget);
  return ev.originalEvent.deltaY > 0
    ? el[0].scrollWidth - el.scrollLeft() <= el.innerWidth()
    : el.scrollLeft() === 0;
});
#wrap {
  max-width: 600px;
  margin: 0 auto;
}

#scroll {
    width: 600px;
    border: 1px solid #111;
    padding: 0px;
    margin: 0px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.box-wrap{
    padding: 0px;
    margin: 0px;
    height: 200px;
    width: 2040px;
}

.box {
    height: 200px;
    width: 200px;
    padding: 0px;
    background: #123;
    display: inline-block;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">

  <h1>asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>

  <div id="scroll">
    <div class="box-wrap">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>     
    </div>
  </div>

  <h1>asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>
  
</div>

.scrollTop(), Setting the scrollTop positions the vertical scroll of each matched element. Example: Set the scrollTop of a div. 1. 2. 3. It will make vertical and horizontal scrollable bar and the auto will make only vertically scrollable bar. For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

You need to stop the default event behavior (vertcal scrolling) with e.preventDefault() in your mouseWheelHandler.

Prevent body scrolling when the user scrolls on fixed position div , I tried to add overflow:hidden for <html> and <body> but it didn't help. I would like to prevent scrolling through the fixed element, but I would like to allow getElementById('fixed'), overflow; $(window).on('load resize', function()� Fair enough. I tend to think that making the vertical scroll wheel scroll horizontally is just as bad as the touch device issue you pointed out in your article (making vertical swiping scroll left and right), because really, both have the same issue of subverting user expectations.

For making the #scroll div stick to the page, don't stop the normal vertical scrolling. Instead, increase the top position of the div so that it looks like the #scroll div is staying in the same position.

I wrapped the portion that needs to stick inside a #fixedSec.

Also, to make the .box-wrap div scroll with the vertical window scroll, use the scrollTop() function, and then translate your .box-wrap accordingly.

The codepen link is this.

Below is code.

var scroller = {};
var topSpace = $('#topHeading').height();
const scrollWidth = $('.box-wrap').width();
console.log($(window).width());

scroller.e = document.getElementById("scroll");
$(window).scroll(function(event) {
  var scroll = $(window).scrollTop();

  if (scroll > 785 && ((765 - scroll) > ($(window).width() - $(".box-wrap").width()))) {


    var scrollPos = scroll - 770;
    $('#fixedSec').css({
      'top': scrollPos + "px"
    })
    $('.box-wrap').css('transform', 'translateX(' + (755 - scroll) + 'px)');



  }


});
h1 {
  width: 500px;
}

#wrap {
  margin: 0 auto;
}

#fixedSec {
  position: relative;
}

#scroll {
  width: 100vw;
  border: 1px solid #111;
  padding: 0px;
  margin: 0px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.box-wrap {
  padding: 0px;
  margin: 0px;
  height: 200px;
  width: 2040px;
}

.box {
  height: 200px;
  width: 200px;
  padding: 0px;
  background: #123;
  display: inline-block;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">

  <h1 id="topHeading">asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas
    fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh
    sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas
    kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>

  <div id="fixedSec">
    <div id="scroll">
      <div class="box-wrap">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
      </div>

    </div>

    <h1>asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas
      fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh
      sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs
      kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk</h1>
  </div>


</div>

How to disable scrolling temporarily using JavaScript , onscroll event fires when the window has been scrolled. Overriding this function and setting it to a fixed position every time the scroll happens will� How to disable document body from scrolling I am using the new slider controls in a webform; however, these slider controls make the entire document scrol. I'll cover the following topics in the code samples below: Page, Lock, Scrolling JavaScript, JavaScript, Scrolling Html, and Document Body.

Window.scroll(), put the 100th vertical pixel at the top of the window --> <button onclick="scroll(0, 100);">click to scroll down 100 pixels</button>. Using options : How to prevent Windows 10 from hiding scrollbars automatically. In order to prevent scrollbars from hiding automatically on Windows 10, use the following steps: Open Settings. Click on Ease of Access.

overscroll-behavior, You can use overscroll-behavior to get rid of unwanted scroll chaining scrolling areas, and default scroll overflow behavior is prevented. Both of these areas scroll; normally if you scrolled the chat window until you hit a� Basic Vertical Scroll Box. To make a scroll box with a vertical scroll, you need to use overflow-y:scroll;. This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high. Here, we make our content too big simply by adding too much text to fit into the div.

Simple Solution to Prevent Body Scrolling on iOS, Learn how to prevent body scrolling on iOS and Android devices. let scrollPosition = 0; export default { enable() { scrollPosition = window. HTML Div Tag Horizontal/Vertical Scrollbar Example Code and how to set scrollbar in vertically or Horizontally inside HTML Div Tag.

Comments
  • This is probably part of what you're trying to achieve: stackoverflow.com/questions/3656592/…
  • Thanks for the suggestion but I tried that and the vertical page scroll didn't stop when scrolling inside the #scroll div.
  • It works, as long as you scroll inside #scroll (because that's where you bound your mousewheel). If you want to always scroll the element when it's into view, you need to bind on window scroll, return false when the element has scrolled into view, scroll the element until the end and then start returning true again. However, users won't be able to get out of the scroll-lock when the element is into view even if they scroll outside of the element, which is a huge UX problem. You'll make a lot of users close your website in frustration and never return.
  • This works great in Chrome! Any idea how to get it working with Firefox?
  • Hmm, I tried that and the horizontal section still moves when mousewheeling down.
  • i updated my code, try again (it works for me in Chrome)
  • Thanks! I tested and it works great in Chome... but I can't get it to work in Firefox. Any idea why it doesn't work in FF?
  • @Axion Use the 'wheel' event instead of 'mousewheel'. Note that all the examples add real bugs to any application that implements this. For example, Chrome will start scrolling both the body element vertically AND the element with the wheel event. Firefox has a similar problem but sometimes fails to latch onto the element scroll. Only an "always preventDefault()" solution works to prevent odd scrolling behaviors, but that would fail to answer the question. A better solution might be a new CSS scrolling rule, but that requires standards bodies and browser vendors to get involved.