Capture Scroll on Overflow:Hidden elements

Question

Suppose that you have an element with overflow hidden, is it possible to capture mouse scrolls on that element with out scrolling?

The reason I'm asking this is; I have a single page designed website and I wrote a script that automaticlly scrolls to the next position as you scroll down or up. But there is something that I don't want. As they try to scroll, page is actually scrolling in real meaning before function fires on scroll to scroll itself to next position. I'm planning to take body's overflow to hidden and they will see no scrolls but autoscroll.

ex:

HTML

<body>
<div id="blue" class="clicked">
</div>
<div id="red" class="clicked">
</div>
<div id="green" class="clicked">
</div>
</body>

CSS

body{
  overflow:hidden;
  margin:0;
}
#blue{
  background-color:blue;
  width:100vw;
  height:100vh;
}
#red{
  background-color:red;
  width:100vw;
  height:100vh;
}
#green{
  background-color:green;
  width:100vw;
  height:100vh;
}

JS

$(document).ready(function(){
  $(document).scroll(function(){
    $('body').animate({'scrollTop':'1000'},3000);
  });
});

DEMO

And what happens if the user has no mouse wheel (eg. laptops with trackpad only)? Or no mouse at all (touchscreen)? Or any other amount of reasons this is a bad idea? — Niet the Dark Absol
– Niet the Dark Absol, Commented Jan 27, 2018 at 17:12
if you capture mousewheel's scroll it is same algorith with laptop's trackpad or etc. Because JQuery's scroll function capture touchscreen slides or laptop's trackpad. @NiettheDarkAbsol — Güney Saramalı
– Güney Saramalı, Commented Jan 27, 2018 at 17:13
While that's true, if you outright disable scrolling (which is what overflow:hidden does), you will need to re-create every single way of scrolling. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jan 27, 2018 at 17:14
I'm up to that just give me the way to do that if you know =) @NiettheDarkAbsol — Güney Saramalı
– Güney Saramalı, Commented Jan 27, 2018 at 17:15

Rauli Rajande · Accepted Answer · 2018-01-27 17:48:30Z

Here is an example with element overflow:hidden and scrolling between positions:

var scroll_blocked = false;
$('.scrollable').on('mousewheel DOMMouseScroll', function (e) {
		
  if (!scroll_blocked){
		
		var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail);

		if (delta < 0){
    
      var new_pos = $('.scrollable').scrollTop() + $('.scrollable').height();
      if (new_pos > ($('.scrollable_inner').height() - $('.scrollable').height())) return false;
          
    } else if (delta > 0){
		
      var new_pos = $('.scrollable').scrollTop() - $('.scrollable').height();
      if (new_pos < 0) return false;
    
    }
    
    // scroll to new position
		$('.scrollable').animate({'scrollTop': new_pos}, 500);
    scroll_blocked = true;
    setTimeout(function(){
      scroll_blocked = false;
    }, 500);
    
	}
    
  // disable all other scroll
  return false;
  
});

.scrollable {
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.scrollable_inner {

}

.box {
  height: 200px;
  width: 100%;
}

.box_green {
  background-color: green;
}

.box_blue {
  background-color: blue;
}

.box_red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollable">
  <div class="scrollable_inner">
    <div class="box box_green">First slide - hover and scroll down</div>
    <div class="box box_blue">Middle slide</div>
    <div class="box box_red">Last slide -scroll up</div>
  </div>
</div>

For whole page attach event listeners to:

// mouse
$('html').on('mousewheel DOMMouseScroll', function (e) { ...

// touch
$('body').on('touchmove', function(e) { ...

To scroll whole page

$('html,body').animate({'scrollTop': ...

Thank You for this answer, My answer was a bit missing in the way of capturing if the scroll is downside or up. This is fully working answer.

Güney Saramalı · Accepted Answer · 2018-01-27 17:34:06Z

1

I found the answer, Here is the answer if anyone needs in the future.

$(document).ready(function(){
  $(document).bind('mousewheel', function(evt) {
    $('body').animate({'scrollTop':'1000'},3000);
  });
});

DEMO

answered Jan 27, 2018 at 17:34

Güney Saramalı

8091 gold badge12 silver badges19 bronze badges

Comments

Brickers · Accepted Answer · 2018-01-27 17:31:46Z

0

the issue you have is that every time the window scrolls, you are triggering some code that makes the window scroll, so the browser is just getting confused as it's stuck in a circuit.

it would be best to leave the overflow as normal, and put the code to scroll in something such as a click event handler, for example on a set of links:

$("a").on('click', function(e) {
  var href = $(this).attr("href");
  e.preventDefault();

  var offsetTop = href === "#" ? 0 : $(href).offset().top;
  $('html, body').stop().animate({ scrollTop: offsetTop }, 500, 'swing')
};

if you don't want the user to have to click, you could set a timer function on load which triggers your scroll animation periodically, but it would be best for the user if there is some way of overriding this, as it's really annoying when the page moves when you wanted to stop and look at something

edited Jan 27, 2018 at 17:31

answered Jan 27, 2018 at 17:24

Brickers

3022 silver badges12 bronze badges

3 Comments

Güney Saramalı Over a year ago

Actually my script is now working well and i minimized the manuel scrolling by taking body's overflow to hidden when the function is fired. But there still is a little amount of scroll on the page before function gets fired. If there was no move on the page it would look more professional.

Brickers Over a year ago

i've added some code that might help. i think it is a bad idea to have the scroll event handler cause further scrolling - it's not normal behaviour, it may change with a browser update, and you're deliberately getting into a loop for no real reason

Güney Saramalı Over a year ago

I posted the answer that i was looking. Check it. Thank you btw.

Collectives™ on Stack Overflow

Capture Scroll on Overflow:Hidden elements

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related