stop the page scrolling when selecting/dragging text

I have a page where I do not want the user to be able to scroll. In order to prevent it, I just set the body to have a hidden overflow style. This is sufficient up until the point where a user tries to select some text and then drags to the bottom. The window then scrolls with the u开发者_开发知识库sers dragging. How can I prevent this?

---

use position: fixed;. If you want the whole body to be non-scrollable:

body
{
  position: fixed;
}

EDIT: after receiving the comment from user Sam, I've decided to go back and test this method once again. Now that I reconsider it and Sam's concern that it would mess with styles, I've come to the conclusion that the following would be a better solution:

html
{
  position: fixed;
  width: 100%;
  height: 100%;
}

The prevents some sites (stackoverflow included) from ending up left aligned. It also uses the highest node available, which should have been done in the first place.

---

I tried Josephs answer but it can mess up a lot of the style on the website.

Another way would be to set the overflow of the website to hidden, this is also far from ideal but it didn't mess up any styling for me, hopefully this is helpful to someone.

body {
  overflow-y: hidden;     
}

---

It can be helpfull

html
{
    overflow: hidden;

}