你可以忽略其余的(我希望!)并专注于这个唯一的问题:
图像上的缩放效果很好,它专注于按下的象限,就像我想要的那样.但是,如果缩放在左上角象限上,它只会放置顶部和底部的滚动条.
我希望它总是显示滚动条.我失踪了什么
谢谢
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>
解决方法
关于文档流动方向,顶部和左侧是块启动和内联起始侧和浏览器,或者UA的行为就好像内容被限制在该方向之外.
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 07001 and 07002 of the Box (thereby behaving as if they had no scrollable overflow on that side).
可能有一个JS黑客.我不确定.
这里有一些解决方法(更好的解释).
> CSS Transforms / JS to zoom into element
> Canvas Method
在你的情况下,我能想到的最好的方法是为.img-wrapper添加这个CSS
.img-wrapper { height: 100%; width: 100%; overflow: auto }
并添加overflow:auto;到最后一个else语句中的imgPlace.setAttribute()
imgPlace.setAttribute("style","transform-origin: "+ tro + " 0px; transform: scale(2);position: relative;overflow: auto;");
这样就可以在象限1,2和3中得到滚动条.在第四个象限滚动限制将被启用.
原文地址:https://www.jb51.cc/js/152726.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。