'sublime-scroll plugin is not scrolling as expected (iframe event catching issue)
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?
Solution 1:[1]
$(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!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |
