Расчет коэффициента масштабирования iScroll

Question

У меня проблема и действительно надеюсь, что кто-то может мне помочь.

JSFiddle: https://jsfiddle.net/EstSiim/zjqptg9j/3/

HTML:

<div id="wrapper"> 

    <div id="content"> 

    </div> 

</div> 

<br><br><br> 

<button id="btn">Zoom to view</button> 

CSS:

#wrapper { 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    overflow: hidden; 
    position: relative; 
} 

#content { 
    width: 700px; 
    height: 300px; 
    background-color: blue; 
} 

JavaScript:

var myScroll = new IScroll('#wrapper', { 
     mouseWheel: true, 
     keyBindings: true, 
     wheelAction: 'zoom', 
     scrollbars: true, 
     scrollX: true, 
     scrollY: true, 
     zoomMin: 0.1, 
     zoom: true, 
     mouseWheelSpeed: 20, 
}); 


var zoomFactor = 0.4; //need to calculate this somehow 

$('#btn').on('click', function() { 

    myScroll.zoom(myScroll.scale - zoomFactor); 

}); 

Поэтому в основном то, что я хочу iScroll (https://github.com/cubiq/iscroll), чтобы уменьшить масштаб, поэтому отображается весь его контент. Проблема в том, что размер его содержимого не фиксирован (это может быть 700x300, 2000x3000, 200x900 и т. Д.).

Спасибо за ваше время

Answer 1

Используйте этот метод, если я понимаю правильно, вы хотите сбросить содержимое, я осуществил это на обоих измерениях (ширина против высоты), если вам нужен только один его модификации подходят фактор для возврата точного процента измерения (без макс просто выберите один для возврата), скрипка here:

//get wrapper dimensions 
var wrap = { 
    H : $('#wrapper').height(), 
    W : $('#wrapper').width() 
} 
//get content dimensions 
var content = { 
    H : $('#content').height(), 
    W : $('#content').width(), 
    }; 

var myScroll = new IScroll('#wrapper', { 
     mouseWheel: true, 
     keyBindings: true, 
     wheelAction: 'zoom', 
     scrollbars: true, 
     scrollX: true, 
     scrollY: true, 
     zoomMin: 0.1, 
     zoom: true, 
     mouseWheelSpeed: 20, 
}); 
//compute reset zoom factor 
var fitFactor = function() 
{ 
    //compute witch dimension is larger width vs height 
    h = content.H/wrap.H;//zoom factor for height 
    w = content.W/ wrap.W;//zoom factor for width 
    //get max between zoom factores, remove percents 
    renderedFactor = Math.max(h, w); 
    //return scale factor 
    return 1/renderedFactor; 
}; 

$('#btn').on('click', function() { 
    myScroll.zoom(fitFactor()); 
});