две функции прокрутки окна конфликтуют и запускаются дважды - PullRequest
Новая
       9

две функции прокрутки окна конфликтуют и запускаются дважды

0 голосов
/ 22 ноября 2018

Как это выглядит:

image

This is like a mini scrollbar so

  1. dragging and dropping #draggable will trigger html scroll move.
  2. not using the scrollbar, when you scroll up or down #draggable automatically goes to a suitable position.

Problem occurs when I drag and drop #draggable, then html scroll moves, it triggers $(window).scroll(function(). #draggable goes up or down then goes to it's suitable position.

$(document).ready(function(){
  $( "#draggable" ).draggable({axis: "y", grid: [ 0, 55 ], containment: "parent"});
  var scrollT = $(document).scrollTop();
  var visualT = $("#visual").offset().top;
  var strengthT = $("#strength").offset().top;
  var portfolioT = $("#portfolio").offset().top;
  var contactT = $("#contact").offset().top;

  $( "#droppable01" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#visual").offset().top
    }, 1000);
   }
  });
  $( "#droppable02" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#strength").offset().top
    }, 1000);
   }
  });
  $( "#droppable03" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#portfolio").offset().top
    }, 1000);
   }
  });
  $( "#droppable04" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#contact").offset().top
    }, 1000);
   }
  });

  $(window).scroll(function(){
   if(scrollT < 1000){
    $("#draggable").css({"top":"0px"});
   }
   if(scrollT >= 2000){
    $("#draggable").css({"top":"55px"});
   }
   if(scrollT >= 3000){
    $("#draggable").css({"top":"110px"});
   }
   if(scrollT >= 4000){
    $("#draggable").css({"top":"165px"});
   }
  });
});
#pageDesc{width:16px; text-align:center; position:fixed; top:375px; right:75px; font-size:16px;}
#pageDesc p{height:175px;  margin:20px 0; position:relative;}
#pageDesc .line{display:inline-block;width:1px; height:100%; background-color:#333; }
#draggable{z-index:3; display:block; width:9px; height:9px;border:1px solid #333; border-radius:100%; position:absolute; left:3px; top:0; transition:all 1s;}

/*#draggable.top0{top:0px;}
#draggable.top55{top:55px;}
#draggable.top110{top:110px;}
#draggable.top165{top:165px;}*/
#pageDesc ul{z-index:1;width:100%; height:100%; position:absolute;left:0; top:0;}
#pageDesc ul li{width:100%; height:24%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div id="pageDesc">
 01
 <p>
  <span class="line"></span>
  <span class="point" id="draggable"></span>
 </p>
 04
 <ul>
  <li id="droppable01"></li>
  <li id="droppable02"></li>
  <li id="droppable03"></li>
  <li id="droppable04"></li>
 </ul>
</div>

Я пытался изменить $("#draggable").css({"top":"0px"});

  1. на #draggable 'attr('style', "top:;"); высота.
  2. до $("#draggable").removeClass("top0 top110 top165") .addClass("top55");

, и они не работают.

...