Mousemove / scroll to next hash

  • A+
Category:Languages

I added the following code in order to scroll with my mouse (scroll on click+drag, not by the mousewheel). So far, so good - works like a charm:

var clicked = false, clickY; $(document).on({ 'mousemove': function(e) {     clicked && updateScrollPos(e); }, 'mousedown': function(e) {     clicked = true;     clickY = e.pageY; }, 'mouseup': function() {     clicked = false;     $('html').css('cursor', 'auto'); } });  var updateScrollPos = function(e) {     $('html').css('cursor', 'row-resize');     $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY)); } 

I am trying to change this scroll behavior so that each directional click+drag mouse movement jumps to the next/closest hash after e.g. a 10px drag. In other words, a mouse scroll up should jump to the next hash above the current position, scrolling down should jump to the next one below.

This doesn't seem to be covered by any of the related questions.

Edit:

I think I need to replace

$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY)); 

by parts of the solution in the link that follows. Unfortunately, this seems to be above my skill level:

how to get nearest anchor from the current mouse position on mouse move

Solution:

I used Saeed Ataee's answer, really happy about that code, but replaced the mouse-wheel code portion with the following one I had in place already, just happened to work better on my end (I am sure his is fine, just giving an alternative here):

$('#nav').onePageNav();   var $current, flag = false;  $('body').mousewheel(function(event, delta) { if (flag) { return false; } $current = $('div.current');  if (delta > 0) {     $prev = $current.prev();      if ($prev.length) {         flag = true;         $('body').scrollTo($prev, 1000, {             onAfter : function(){                 flag = false;             }         });         $current.removeClass('current');         $prev.addClass('current');     } } else {     $next = $current.next();      if ($next.length) {         flag = true;         $('body').scrollTo($next, 1000, {             onAfter : function(){                 flag = false;             }         });         $current.removeClass('current');         $next.addClass('current');     } }  event.preventDefault(); 

});


I think this is your answer.

let currentElement = 0,   maxLength = $("div[id^='section']").length,   changeSw = false;  $(document).ready(function() {   var clicked = false,     clickY;   $(document).on({     mousemove: function(e) {       clicked && updateScrollPos(e);     },     mousedown: function(e) {       clicked = true;       changeSw = true;       clickY = e.pageY;     },     mouseup: function() {       clicked = false;       changeSw = false;       $("html").css("cursor", "auto");     }   });    var updateScrollPos = function(e) {     $("html").css("cursor", "row-resize");     // $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));     if (changeSw && clickY - e.pageY > 0) {       currentElement =         (currentElement < maxLength - 1) ? currentElement + 1 : currentElement;       changeSw = false;       clicked = false;     } else if (changeSw && clickY - e.pageY <= 0) {       currentElement = currentElement > 0 ? currentElement - 1 : 0;       changeSw = false;       clicked = false;     }     console.log(currentElement)     $("html, body").animate({         scrollTop: $("#section-" + currentElement).offset().top       },       200     );    };    $(document).on("mousewheel", function(e) {     if (e.originalEvent.wheelDelta > 0) {       currentElement = currentElement > 0 ? currentElement - 1 : 0;        $("html, body").animate({           scrollTop: $("#section-" + currentElement).offset().top         },         200       );     } else {       currentElement =         currentElement < maxLength - 1 ? currentElement + 1 : currentElement;       $("html, body").animate({           scrollTop: $("#section-" + currentElement).offset().top         },         200       );     }   }); });
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <body>   <div id="section-0">Section 1</div>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <div id="section-1">Section 2</div>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <div id="section-2">Section 3</div>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <br>   <div id="section-3">Section 4</div> </body>  </html>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: