Horizontal scrollbar of website is reset position when using Fancybox

Question

My website uses Fancybox to display item and mousewheel for horizontal mouse scroll.

Each time I scroll my page, then select an item, the horizontal scroll is set to position 0. I want the scroll remains its position.

Please help me.

Answer 1

Fancybox is setting the .fancybox-lock class on the html...

.fancybox-lock {
    overflow: hidden !important; // <-- this is the problem
    width: auto;
}

.fancybox-lock {
    width: auto;
}

Answer 2

I edited your code and Its worked.

• beforeLoad:

• beforeClose:

• afterShow:

that is not necessary. I removed.

       var scrollPos = 0;
        $(".news_helper").fancybox({
            width: 512,
            fitToView: false,
            height: '100%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none',
            mouseWheel: false,
        });
        $('html, body').mousewheel(function (event, delta, deltaX, deltaY) {
            this.scrollLeft -= (delta * 100);
            event.preventDefault();
        });
        $("img.lazy").lazyload({
            effect: "fadeIn",

        });

Check it JSFIDDLE