Ich erstellte eine hexagon grid map und musste in der Lage sein zu vergrößern. Die Wheel Event Zoom wurde korrekt hinzugefügt, aber wenn ich heranzoomen, ist die obere/linke Seite der Karte abgedeckt und ich kann Scrolle nicht ganz nach oben/links (die unteren/rechten Seiten sind erreichbar).Zoomen auf Sechseck Kacheln Javascript
Ebenso, wenn ich verkleinern, gibt es eine große Lücke auf der oberen/linken Seite, während die unteren/rechten Seiten normal sind. Ich bin mir nicht sicher, warum das passiert, aber ich kann es nicht beheben.
HTML:
<div id="map"></div>
CSS:
#map {
position: absolute;
left: 0;
top: 0;
padding: 10px 1px;
width: 3032px;
z-index: 5;
overflow: visible;
transform-origin: 50% 50%;
}
body {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
#map>div {
position: relative;
display: inline-block;
float: left;
width: 60px;
height: 34.64px;
margin: 8px 0;
border-left: solid 1px rgba(35, 35, 35, 0.8);
border-right: solid 1px rgba(35, 35, 35, 0.8);
opacity: 1;
transition: opacity 400ms;
}
#map>div:nth-child(97n+50) {
margin-left: 30px;
}
#map>div:before,
#map>div:after {
content: "";
position: absolute;
z-index: 1;
width: 42.43px;
height: 42.43px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 7.7868px;
}
#map>div:before {
top: -21.2132px;
border-top: solid 1.4142px rgba(35, 35, 35, 0.8);
border-right: solid 1.4142px rgba(35, 35, 35, 0.8);
}
#map>div:after {
bottom: -21.2132px;
border-bottom: solid 1.4142px #333333;
border-left: solid 1.4142px #333333;
}
JavaScript:
for (var j = 0; j < 2500; j++) {
var tile = document.createElement('div');
tile.setAttribute('id', '#' + j);
tile.setAttribute('tabindex', 0);
map.appendChild(tile);
}
var zoom = 1;
document.addEventListener('wheel', function(e) {
//console.log((map.scrollLeft + e.pageX) + ' ' + (map.scrollTop + e.pageY));
map.style.transformOrigin = (map.scrollLeft + e.pageX) + 'px ' + (map.scrollTop + e.pageY) + 'px';
// This is so that the zoom center is at the cursor. (I feel like this is causing the problem)
zoom += e.deltaY/5;
if (zoom < 0.5) zoom = 0.5;
else if (zoom > 5) zoom = 5;
console.log(map.style.transform = "scale(" + zoom + ")");
}, false);
Es scheint, dass einige Browser bieten keine Unterstützung für Pfeiltasten Navigation in diesem Fall. Ich benutze Firefox und die Pfeiltasten Navigation funktioniert.
Kann mir jemand helfen, dieses Problem zu beheben?