sublime-scroll plugin is not scrolling as expected (iframe event catching issue)

176 Views Asked by At

I want to read mouse position from an iframe. I am doing it with this implementation:

$($("#sublime-scroll-iframe").contents()[0], window).find('body').bind("mousedown", 
    function(e) {
        console.log("x:" + (e.pageX) + ", y:" + e.pageY);
    }
);

My working example: http://jsfiddle.net/s37e1ro0/1/ but

I can't make it to work with demux's sublime-scroll js script. Output is window coordinates or nothing.

Sublime-scroll example: http://django.is/ or you can download example files from https://github.com/demux/sublime-scroll

The reason is, demux's script actually doesn't work completely as Sublime scroll. For example. In sublime, you see part of code, and you click on that part, sublime scrolls to that part code. That isn't the situation with demux's script. Clicking on part of page doesn't scroll to that part of the page. It scrolls to position of ratio between window and whole document.

I couldn't find a reason why it's not working. Does anyone have any idea? Or if anyone have an idea to do it without mouse coordinates?

1

There are 1 best solutions below

0
On BEST ANSWER
            $(document).ready(function() {
                $.sublimeScroll({
                    top: 60, // px to top
                    bottom: 40, // px to bottom
                    scrollWidth: 200, // Width of scrollbar
                    removeElements: 'script',
                    fixedElements: 'header.top, footer.bottom',
                    contentWidth: 860, // Scroll viewport width
                    minWidth: 800 // Min width of window to display scroll
                });

                $("#sublime-scroll-overlay").css('display', 'none');

                var sscIfBody = $($("#sublime-scroll-iframe").contents()[0], window).find('body');
                var sscIfBar = $("#sublime-scroll-bar", sscIfBody);
                var sHold = false;
                var sDeltaY = 0;


                sscIfBody.bind("mousedown", function(e) {
                    window.scrollTo(e.pageX, e.pageY - window.innerHeight / 2);
                    e.preventDefault();
                });

                sscIfBar.bind('mousedown', function(e) {
                    sDeltaY = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;
                    sHold = true;
                    e.stopPropagation();
                    e.preventDefault();
                });

                sscIfBody.bind("mouseup", function(e) {
                    sHold = false;
                });

                sscIfBody.bind("mousemove", function(e) {
                    if (sHold)
                        window.scrollTo(e.pageX, e.pageY - sDeltaY);
                }); 

            });

That's it. Now it's working same as Sublime's scroll. Enjoy!