CODEWITHSUNDEEP
jqueryscrolltop
David
David

Reputation: 1963

ScrollTop - jQuery does not scroll

I've got this code:

http://jsfiddle.net/goodghost/MEr3a/

$(function() {

 var myWidth = $(".container").width();
 var myHeight = $(window).height();
 console.log(myHeight);
 var myShift = (1920 - myWidth)/2;

 $(".container").scrollLeft(myShift);


 //small window
 $(".dragMe").css({"left":myShift/10+"px", "width":(myWidth)/10+"px", "height":myHeight/10+"px"});
 $(".dragMe").draggable({
            addClasses: false, 
            containment: "parent",
            drag: function(event, ui) { 
              var offset = $(this).offset();
              var xPos = offset.left;
              var yPos = offset.top;
              console.log(yPos);
              $(".container").scrollLeft(xPos*10);
              $(".container").scrollTop(yPos*10+"px");
            }
 });
});

What I want to achieve is to scroll in every direction the image inside .container triggered by movement of the semi transparent div with class dragMe. Anyone know why it's working only with left and right, but not top, bottom?

Upvotes: 0

Views: 229

Answers (2)

arvic.rivera
arvic.rivera

Reputation: 673

you will not be able to use $('.container').scrollTop if you allow the div to grow 100% in height. you need to set a width and height for .container and it will work like a charm.

JsFiddle: http://jsfiddle.net/MEr3a/9/

Upvotes: 1

Magus
Magus

Reputation: 15104

Your container can't scroll because it has no way to scroll.

When you look at your example, the vertical scroll bar belong to the window, but not to your container. You can try this :

$(window).scrollTop(yPos * 10);

(But the * 10 is not the good value i think)

Upvotes: 1

Related Questions