when zoomed, div does not place scrollbars on certain cases

Question

This is a simple HTML placeholder for a thing I am working on. You can ignore the rest (I hope!) and focus on this sole issue:

The zoom on the image works, and it focus on the quadrant you press on, as I want it to. But it only places top and bottom scroll bars if the zoom is made on the top left quadrant.

I want it to always show the scroll bars. What am I missing?

Thanks

var images = ["Species_copy_number.png", "Species_coverage.png", "Species_distribution.png", "Gene_copy_distribution.png"];
var descriptions = ["cariño", "muis bueno", "caliente", "CABRÓN!"];
var titles = ["ay", "ay ay", "ay ay ay", "AY AY AY MI HIJJJJJJOOOOOOOOOOOOO"];
function changeImage(index){
    var img = document.getElementById("img_place");
    img.src = "Figures/" + images[index];
    document.getElementById("desc_place").textContent = descriptions[index];
    document.getElementById("subtitle").textContent = titles[index];
}
window.zoomedIn = false;
window.onload = function(){
    var canvas = document.getElementById("img_wrapper");
    canvas.onclick = function(event){
        var imgWrapper = this, zoomContainer = document.getElementById("zoom-container");
        var imgPlace = document.getElementById("img_place");
        if (window.zoomedIn) {
            imgPlace.setAttribute("style", "transform :\"\"");
            window.zoomedIn = false;
        } else {
            var width = zoomContainer.offsetTop + zoomContainer.offsetWidth;
            var height = zoomContainer.offsetTop + zoomContainer.offsetHeight;
            var tro = (zoomContainer.offsetTop + event.clientY > height / 2) ? "bottom" : "top";
            tro += (zoomContainer.offsetLeft + event.clientX > width / 2) ? " right" : " left";
            imgPlace.setAttribute("style", "transform-origin: "+ tro + " 0px; transform: scale(2);");
            window.zoomedIn = true;
        }
    }
}

body, html { height: 100%; }
.flex-container {
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-item {
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: flex;
    margin: 3px;
    padding: 0 0 10px;
}
.flex-item img{
    width: 100%;
}
span {
    min-width: 5em;
    margin-top: 3em;
    padding-right: 1em;
}
a {
    padding-left: 0.3em;
}
.img-wrapper {
    border: 1px solid gray;
}
img {
    height: 100%;
    width: 100%;
}
#zoom-container{
    overflow: auto;
}

<h1>Mega title</h1>
<h2 id="subtitle">Title</h2>
<div class="flex-container">
    <div class="flex-item">
        <span>
            cenas<br>
            <a href="#" onclick="changeImage(0)">Img #1</a>
            <a href="#" onclick="changeImage(1)">Img #2</a>
            cenas<br>
            <a href="#" onclick="changeImage(2)">Img #3</a>
            <a href="#" onclick="changeImage(3)">Img #4</a>
        </span>
        <div id="zoom-container">
            <div id="img_wrapper" class="img-wrapper">
                <img id="img_place" src="https://i.ytimg.com/vi/ddqvuwXBK5k/maxresdefault.jpg"/>
            </div>
        </div>
    </div>
</div>
<h2>Description</h2>
<span id="desc_place">Description</span>

Make a JSFiddle and post the link here. It will help with debugging. — jktin12, Aug 03 '16 at 18:19
Works now here, for some reason the fiddle doesn't https://jsfiddle.net/vqtohkm8/5/ — Camandros, Aug 17 '16 at 11:15

score 5 · Answer 1 · edited May 23 '17 at 11:46

5

The coordinate system starts from left upper corner of the parent element. Since you are transforming the origin of the image in your quadrant on click, you are starting it from a clipped point.

With regard to document flow directions, the top and left sides are the block-start and inline-start sides and browsers or UA behave as though content is clipped beyond that direction.

From W3C specs: Scrolling Origin, Direction, and Restriction

Due to Web-compatibility constraints ... UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side).

There may be a JS hack. I am not sure.

Here are some work-arounds (with) better explanations.

The best I could think of in your case is to add this CSS for .img-wrapper

.img-wrapper {
  height: 100%;
  width: 100%;    
  overflow: auto
}

and add overflow: auto; to imgPlace.setAttribute()in your last else statement

imgPlace.setAttribute("style", "transform-origin: "+ tro + " 0px; transform: scale(2);position: relative;overflow: auto;");

That way you will get scroll bars in quadrant 1, 2 and 3. In the fourth quadrant scroll restriction will be enabled.

Here is a codepen edit of your code

edited May 23 '17 at 11:46

Community

1
1

answered Sep 02 '16 at 09:14

AA2992

1,559
3
17
23

I ran your codepen (linux, firefox 48) and the scrollbars appear but if you zoom on the bottom quadrants the scroll bar does not allow to scroll top – Camandros Sep 02 '16 at 10:59
yeah. That is because of the scroll restrictions, transformed origin of the image and document flow direction. Updated the above explanation. Please check. – AA2992 Sep 02 '16 at 11:00
you can have the image as a `background image` and change the values of `background-position` property via JavaScript instead of transforming origin. just an idea. what do you think? – AA2992 Sep 02 '16 at 11:08
Would that allow to scroll on the background? – Camandros Sep 02 '16 at 15:18
Probably not. Your best bet would be to ditch the scroll idea and go with a Pan/Drag or Canvas method. Links updated in the post above. – AA2992 Sep 02 '16 at 16:23

score 2 · Answer 2 · answered Sep 01 '16 at 13:00

2

Simply create two new classes in css

.zoomed {
  transform:scale(2);
}
.scroll {
  overflow:scroll;
}

Add some jquery code

$ ('#img_wrapper').click(function() {
var top = $('#img_place').height() / 2;
$('#img_place').toggleClass('zoomed');
$(this).toggleClass('scroll');
if ($('#img_place').hasClass('zoomed')) {
$('#img_place').css('top', top);
}
else {
$('#img_place').css('top', '0');
}
});

Here is Updated fiddle chek out this. Hope it's fine for you

answered Sep 01 '16 at 13:00

Abhay Singh

1,595
1
23
40

Does not work properly, always zooms center top, and you can only scroll right, so the left part of the image is cropped and unreachable (using firefox 48 linux) – Camandros Sep 01 '16 at 17:19
Here is [Updated fiddle](https://jsfiddle.net/cur3nttb/2/) updated fiddle. Hope it's fine for you – Abhay Singh Sep 02 '16 at 10:16
The zoom always goes to the top left quadrant, I want it to be applied to the quadrant where you click, and yet be possible to scroll to the remainder of the image – Camandros Sep 02 '16 at 11:01

when zoomed, div does not place scrollbars on certain cases

2 Answers2