sublime-scroll插件未按预期滚动(iframe事件捕获问题)

时间:2015-06-12 14:09:29

标签: javascript jquery iframe javascript-events

我想从iframe读取鼠标位置。我是通过这种实现来实现的:

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

我的工作示例:http://jsfiddle.net/s37e1ro0/1/

我无法使用demux的sublime-scroll js脚本。输出是窗口坐标或没有。

Sublime-scroll示例:http://django.is/或者您可以从https://github.com/demux/sublime-scroll下载示例文件

原因是,demux的脚本实际上并不完全像Sublime滚动一样。例如。在sublime中,您会看到部分代码,并且您单击该部分,sublime会滚动到该部分代码。这不是demux脚本的情况。单击页面的一部分不会滚动到页面的该部分。它滚动到窗口和整个文档之间的比例位置。

我找不到它无法正常工作的原因。有谁有想法吗? 或者,如果有人有想法没有鼠标坐标吗?

1 个答案:

答案 0 :(得分:0)

            $(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);
                }); 

            });

就是这样。现在它和Sublime的卷轴一样工作。享受!