I have this code above who switch between css transform-origin and scale to css width and scrollbars.
I need to make this switch because I am having a pinch to zoom for a DIV wrap I'm using in my website.
I'm using css translateX and translateY and Scale for a smoother pinch zoom, but after the zoom take place I need to return back to width and scrollbar so the user can move across the layout.
I have here an example of how Im doing the switch and there is a bit margin on top that I cant really set mind my on.
what is the correct way to do so?
var isOrigin = false; var originX = 500; var originY = 200; var scale = 1.5; var deltaX = 0; var deltaY = 0; var from_origin_to_scroll = function () { if (isOrigin) { from_scroll_to_origin(); return; } var wrap = $('.containter .wrap'); //reset scroll const el = document.scrollingElement || document.documentElement; $('.containter')[0].scrollLeft = 0; el.scrollTop = 0; wrap.css({ transformOrigin: originX + "px " + originY + "px", transform: "translate3d(" + deltaX + "px," + deltaY + "px, 0) " + "scale3d(" + scale + "," + scale + ", 1) ", width: 100 + '%' }); isOrigin = true; $('.info').html('layout set by origin and scale'); } var from_scroll_to_origin = function () { var wrap = $('.containter .wrap'); wrap.css({ transformOrigin: originX + "px " + originY + "px", transform: "translate3d(" + 0 + "px," + 0 + "px, 0) " + "scale3d(" + 1 + "," + 1 + ", 1) ", width: (100 * scale) + '%' }); $('.containter')[0].scrollLeft = originX * (scale - 1); const el = document.scrollingElement || document.documentElement; el.scrollTop = originY * (scale - 1); isOrigin = false; $('.info').html('layout set by width and scroll'); }body { margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; width:100vw; } .top{ position: fixed; width: 100%; background-color: #333; line-height: 40pt; text-align: center; color: #f1f1f1; font-size: 20pt; left: 0; top: 0; z-index: 10; } .top .info{ } .header_content { background-color: #e1e1e1; line-height:130pt; } .containter { width:100%; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; } .containter .wrap { display: flex; flex-direction: column; width: 100%; } .containter .wrap img { width: 100%; margin-top: 30pt; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top"> <div class="info" onclick="from_origin_to_scroll()">click to switch</div> </div> <div class="header_content"> this is a header content - needs to be added to overall calculation </div> <div class="containter"> <div class="wrap"> <img src="https://thumb7.shutterstock.com/display_pic_with_logo/91858/594887747/stock-photo-dreams-of-travel-child-flying-on-a-suitcase-against-the-backdrop-of-sunset-594887747.jpg" /> <img src="https://thumb9.shutterstock.com/display_pic_with_logo/1020994/556702975/stock-photo-portrait-of-a-happy-and-proud-pregnant-woman-looking-at-her-belly-in-a-park-at-sunrise-with-a-warm-556702975.jpg" /> <img src="https://thumb7.shutterstock.com/display_pic_with_logo/234100/599187701/stock-photo-funny-little-girl-plays-super-hero-over-blue-sky-background-superhero-concept-599187701.jpg" /> <img src="https://thumb1.shutterstock.com/display_pic_with_logo/1316512/661476343/stock-photo-funny-pineapple-in-sunglasses-near-swimming-pool-661476343.jpg" /> <img src="https://thumb1.shutterstock.com/display_pic_with_logo/2114402/689953639/stock-photo-adult-son-hugging-his-old-father-against-cloudy-sky-with-sunshine-689953639.jpg" /> <img src="https://thumb7.shutterstock.com/display_pic_with_logo/172762/705978841/stock-photo-businessman-looking-to-the-future-for-new-business-opportunity-705978841.jpg" /> </div> </div>1 Answers
Answers 1
In your case the possible solution is to detect when the user is trying to zoom, and when just to scroll.
const $container = $(".container"); $container.on('touchstart', function (e) { if (e.touches.length > 1){ //more than one finger is detected on the screen, //change mode to transform-origin from_scroll_to_origin() } }); $container.on('touchend', function (e) { //change mode to scrollbars from_origin_to_scroll() }); 
0 comments:
Post a Comment