CODEWITHSUNDEEP
htmlcsssvg
reabow
reabow

Reputation: 219

large area svg not scrolling

I often want to use large svg's for data visualisation etc. These are often big enough that you use the browser to scroll right and down to see everything like you would normally in a website.

The troubles started when I wanted to allow people to comment. I first used foreignobject to embed html in the svg, but IE doesn't support this. Then I turned to overlaying textareas over the svg using textareas and setting them to position:absolute. This way the text area sits nicely on top of the svg.

The only problem is that when the height of the svg exceeds that of the screen, the rest of the svg is not there, and can't be scrolled to. I can zoom out which shows the svg, or adjust the viewbox to get the svg on screen. Neither of these are great solutions as I can't re-zoom to the bottom in the first instance, and lose my coordinates for the absolute textareas in the second. (If I can't figure this out, I will have to dynamically adjust their coordinates relative to the viewbox)

This isn't an overflow problem. The height is a large number of pixels (eg 3000), so I am not asking the broswer to display anything outside of the svg borders. I just want to be able to scroll. Is that too much to ask :)

Apologies for the lack of code, svg's tend to be verbose...

Upvotes: 1

Views: 1999

Answers (2)

reabow
reabow

Reputation: 219

Okay, so I have found the problem. And its name is jquery.fullPage. I had this library included, but quickly decided not to use it. (And then forgot to remove it)

This is how it describes itself: fullPage.js (is a) jQuery Plugin for fullscreen scrolling websites.

Perhaps unsurprisingly from that description, I should have guessed that it might impact the broader ability to scroll, even if it was not utilised in anyway.

Upvotes: 1

Tolokoban
Tolokoban

Reputation: 2339

You can use position: fixed to keep your comment box fixed when the SVG scrolls. Take a look at this example: http://jsfiddle.net/LLre6fgk/

#comments {
    position: fixed;
    right: 0;
    top: 0;
}

Then you can use absolute but with a container for your SVG and your DIV: http://jsfiddle.net/LLre6fgk/1/

<div id="container">
    <svg width="2000" height="2000">
        <path fill="none" stroke="#123" stroke-width="4" d="M0,0h50v50h50v50..."/>
    </svg>
    <div id="comments">
        <p>Please enter a comment:</p>
        <textarea cols="20" rows="5"></textarea>
    </div>
</div>

Upvotes: 1

Related Questions