Scroll Direction

Question

Trying to make div move with mousescroll in opposite direction of scroll from top right to bottom left hand corner.

Right now its going from bottom left to top right

#block {
position: absolute;
top: 400px;
left: 100px;



<script>
$(function(){
    var lastScrollYPos = 0;
    $(window).on('scroll', function(){
        var $this = $(this),
            $block = $('#block'),
            // retrieves the top and left coordinates
            position = $block.offset(),
            // X and Y factors allows to change the diagonal movement direction and
            // degree. Negative values inverts the direction.
            factorX = 1,
            factorY = 1,
            // retrieves current vertical scrolling position and calculate the
            // relative offset
            scrollYPos = $this.scrollTop(),
            offset = Math.abs(scrollYPos - lastScrollYPos),
            // mouse wheel delta is inverted respect to the direction, so we need to
            // normalize it against the direction
            direction = scrollYPos > lastScrollYPos ? -1 : 1,
            // calculates the new position. NOTE: if integers only are used for factors,
            // then `Math.floor()` isn't required.
            newTop = position.top + Math.floor(direction * offset * factorY),
            newLeft = position.left - Math.floor(direction * offset * factorX);

        // moves the block
        $block.offset({ top: newTop, left: newLeft });
        lastScrollYPos = scrollYPos;
    });
});
  </script>

Answer 1

I've flipped it around, by inverting the direction (as is commented) and then adding the last Y position instead of subtracting it (i've commented that)

 $(function() { var lastScrollYPos = 0; $(window).on('scroll', function() { var $this = $(this), $block = $('#block'), // retrieves the top and left coordinates position = $block.offset(), // X and Y factors allows to change the diagonal movement direction and // degree. Negative values inverts the direction. factorX = -1, factorY = -1, // retrieves current vertical scrolling position and calculate the // relative offset scrollYPos = $this.scrollTop(), // ---- Flip around the offset calculation offset = Math.abs(scrollYPos + lastScrollYPos), // mouse wheel delta is inverted respect to the direction, so we need to // normalize it against the direction direction = scrollYPos > lastScrollYPos ? -1 : 1, // calculates the new position. NOTE: if integers only are used for factors, // then `Math.floor()` isn't required. newTop = position.top + Math.floor(direction * offset * factorY), newLeft = position.left - Math.floor(direction * offset * factorX); // moves the block $block.offset({ top: newTop, left: newLeft }); lastScrollYPos = scrollYPos; }); });

 .body { height: 1500px; width: 1000px; } #block { height: 750px; width: 500px; background: blue; position: absolute; top: -700px; left: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <div id="block"></div> </div>