How to Increment a Number by 1 on Window Scroll

How To Increment A Number By 1 On Window Scroll

The problem is that you define number inside the scroll event.
You will need to define it outside in order for the amount to be incremented.

var number = 0;
$(window).scroll(function(){
  number++;
});

The current way you are doing it means number is reset to 0 each time the event fires.

How can you increment a number on scroll without having the scrollbar(actually scrolling)?

If you go for the wheel event, something like this might resemble what you're trying to do.
You can then remove the event handler once the page is as much in view as you want.

var secondSection = document.getElementsByClassName("second-section")[0];function leftTransition( event ){  var offset = event.deltaY;  var left = offset < 0    ? ( parseInt( secondSection.style.left ) + 1 ) + '%'    : ( parseInt( secondSection.style.left ) - 1 ) + '%';  secondSection.style.left = left;}window.addEventListener("wheel", leftTransition);

html, body {  margin: 0;  padding: 0;  width: 100%;  height: 100%;  overflow: hidden;}.first-section, .second-section {  width: 100%;  height: 100%;  background-color: steelblue;}.second-section {  position: absolute;  top: 0;  background-color: blue;}

<div class="first-section">content content</div><div class="second-section" style="left: 100%">content content</div>

OnMouseScroll increment a variable JS

I make something that is working for me

https://jsfiddle.net/u93c9eth/2/

var scrollCount = 1;
window.addEventListener('mousewheel', function(e){

  if(e.wheelDelta<0 && scrollCount<5){
    scrollCount++;
  }

  else if(e.wheelDelta>0 && scrollCount>1){
    scrollCount--;
  }
  document.querySelector('.number').innerHTML = scrollCount;
});

On scroll increment value by '0.1'

Correct syntax is pval = 0.1 +pval or you can shorten with +=

var pval = 0;
$(window).on('scroll', function() {
   pval += 0.1; //short for pval =  pval+ 0.1
   console.log(pval);
});

How can I increment value of the variable when scroll reaches top of the div

You can use the data api to save the data individually

$("window").load(){
    $('.post').scrollTop($('.post').height()).data('p',0); //initialize
}

$('.post').scroll(function() {
    var $this = $(this);

    if($this.scrollTop() == 0){
        $this.data('p',$this.data('p') + 1); //increment
        alert($this.data('p'));
    }  
});

See working JSFiddle

jQuery increase and decrease value based on 0.05 on scrolling with jquery

You need to decrease the value when the scroll is up and increase the value when the scroll is down.

To identify a variable that holds the value of the last scroll point, you must use the scroll down if the new value is larger and the scroll up if the new value is smaller.

var counter = 0;
var lastPointScroll = 0;
$(window).scroll(function(){
    var a = $(this).scrollTop();
    
    if(a == 0)
      var counterIncrement = counter = 0;
    else if(a > lastPointScroll)
      var counterIncrement = counter += 0.05;
    else
      var counterIncrement = counter -= 0.05;
   
      
    lastPointScroll = a;
    $("h1").text(counterIncrement.toFixed(2));
})

h1{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
div{
    height: 1500px;
}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

    </head>
    <body>
        <h1>0</h1>
        <div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
    </html>

How to Increment a Number by 1 on Window Scroll