Clever Geek Handbook

Prevent browser from forced scrolling

I have a problem, I am working with draggable elements on my page, all the parent elements have overflow: hidden

and work fine, but if I force the page to scroll the dragging elements outside, unwanted scrolling occurs, you can see this in action in the fiddle by dragging the gray box on the right .. ...

Fiddle: http://jsfiddle.net/a6vzhk2z/

error from pen

EDIT: it is expected that half of the element can go off-page

+3


source to share


3 answers


Did you mean it?

$(".draggable-box").draggable({
    containment: [-100,100,windowWidth - 200,100]
});

Demo



EDIT: Perhaps this would be better:

$(".draggable-box").draggable({
    containment: [0,100,windowWidth - 200,100]
});

EDIT # 2: The problem is not in the box. Mouse problem. This only happens if the mouse is moved outside the window. Preventing mouse shutdown from the window should fix the problem.

+1


source


So when you drag the box to the right, it enlarges the screen a little behind the chip, right?

This may not be what you want, but when I subtracted the extra 100 from windowWidth it seemed to fix the problem:



$(".draggable-box").draggable({
    containment: [-100,100,windowWidth-200,100]
});
+1


source


I found a solution, my solution was the position for the parent.

This is my new SCSS for #container

:

#container{
  position: relative;
  height: calc(100% - 50px);
  overflow: hidden;

  #text{
    @include full-height();
    overflow-y: auto;
    overflow-x: hidden;
  }
}

Here is a fiddle: http://jsfiddle.net/o8Lrpzb2/1/

+1


source






More articles: