scroll based on dragenter event?

180
March 20, 2018, at 4:29 PM

how to scroll up step by step and scroll down step by step using jquery. (jquery ui not appreciated). i have a 2 divs

    <div class="upper" style="height:35px;background-color:red;right:0;left:0;top:0;position:fixed;width:100%;z-index:2000"></div>
    <div class="lower" style="height:35px;background-color:red;right:0;left:0;bottom:0;position:fixed;width:100%;z-index:2000"></div>

if i drag an image and hover on first div (upper),it should scroll up step by stell. if i drag and hover on 2nd div it should scroll down manually.

in both cases scrolling should stop if i came out of the div.

i am trying to implement it using events

var isleftDragPosition=true;;
            $('.upper').on('dragleave', function(){
                console.log("hidragleave");
                var isleftDragPosition=true;
            });
            $('.lower').on('dragleave', function(){
                console.log("hi2dragleave")
                var isleftDragPosition=true;
            });
            $('.upper').on('dragenter', function(){
                var isleftDragPosition=false;
                while(!isleftDragPosition){
                    var x=document.documentElement.scrollTop;
                    console.log("to upper position",x);
                    window.scrollTo(0, x-2);
                }
            });
            $('.lower').on('dragenter', function(){
                console.log("hi2dragenter",document.documentElement.scrollTop)
                window.scrollTo(1000, 1000);
            });

i am trying it with the top div to scroll up, but the code crashes my tab(hang).

how i can do that?

Answer 1

You are redefining your flag in each handler, so the change is not saved. Also, while loop might be to fast for your particular case. I modified code like this:

$('.upper').on('dragenter', function(){
    isleftDragPosition=false;
    clearInterval(interval);
    var f = function() {
      if(!isleftDragPosition){
          var x=document.documentElement.scrollTop;
          console.log("to upper position",x);
          window.scrollTo(0, x-2);
      } else {
        clearInterval(interval);
      }
    }
    setInterval(f, 1000);
});

Hope this helps.

Rent Charter Buses Company
READ ALSO
Can I add a profile feature on squarespace with webhooks and zapier (or apiant?)?

Can I add a profile feature on squarespace with webhooks and zapier (or apiant?)?

I am currently working on an idea to create a booking platform for schools to book substitute teachers onlineI am using Squarespace and would like to integrate the Acuity scheduling plugin with an SMS plugin to allow schools to notify subs immediately...

193
Dynamic height of editor block

Dynamic height of editor block

I use InnovaEditor to create edit block

194
PDF embedded in html

PDF embedded in html

I want to display the different pdf view on button click (small,large,medium etc)I used object to display the pdf file

238
Unable to change svg colour using jQuery

Unable to change svg colour using jQuery

I'm having trouble changing the colour of an svg image with jquery or vanila javascriptI've tried a couple of things but nothing seems to work, the original colour is black and i can change it if i open the svg image in my IDE and add/change the fill attribute

195