Question

I’m creating image slider, it’s contains in big, 100% x 100%, absolute positioning popup div. And I need to block body scroll when slider is active. I tried overflow: hidden for body tag, in js – and it’s not working, thereon I tried it in style.css, result was the same.

body {
    position: relative;
    overflow: hidden;
    display: block;
}

So how to lock scroll for all page by css resources?

Answer 1

Use fixed positioning on your image

#myImage
{
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}