Horizontal Autoscroll on mouse drag is not working in D3 tree for firefox

Question

I am creating D3 tree. With the dragging of tree node the auto scroll is not working in Firefox. The auto-scroll with dragging tree node is working in Firefox. It is working fine in Chrome.

HTML code

<div class="row">
    <div class="tree-container" id="treeId"></div>
</div>

D3.js code

var nodeEnter = node.enter().append("g").call(dragListener).attr(
     "class", "node").attr("transform", function(d) {
     return "translate(" + source.y0 + "," + source.x0 + ")";
     }).on("mouseenter", nodeMouseEnter).on("mouseleave", nodeMouseLeave)
     .on('click', click).attr('id', function(d) {
    return d.nodeId;
});

$('.tree-container').css('overflow', 'auto');

Bootstrap.css

svg:not(:root) {
    overflow: visible;
}

Answer 1

var svg_scroll = d3.select("svg").node(),
             $parent = $('.tree-container'),
             $parent_document_height=$(document),
             w = $parent.width(),
             h = $parent_document_height.height(),
             sL = $parent.scrollLeft(), 
             sT = $parent_document_height.scrollTop();

             var coordinates = d3.mouse(svg_scroll),
                x = coordinates[0],
                y = coordinates[1];

            if (x > w + sL) {
                $parent.scrollLeft(x - w);  
            } else if (x < sL) {
                $parent.scrollLeft(x);
            }
            if (y > sT) {
                $parent_document_height.scrollTop(y);
            } else if (y < sT) {
                $parent_document_height.scrollTop(y);
            }

            d3.select(this).attr({
                x: x - 50,
                y: y - 25
            });