gpt4 book ai didi

javascript - body touch-action : none, 但能够捏缩放 div

转载 作者:太空宇宙 更新时间:2023-11-04 00:43:56 25 4
gpt4 key购买 nike

正如标题所说,我想知道当 body 设置为 touch-action: none 时是否可以仅启用特定的 div

我的目标是阻止所有浏览器缩放,但允许放大它的特定部分(可能是图像)。

这可能吗?也许在 Javascript 或纯 CSS 中?

我的代码如下:

$("#no-zoom").click(function(){
if( $('body').css('touch-action') == 'none' )
$('body').css("touch-action","")
else
$('body').css("touch-action","none");
$('.zoom').css("touch-action","pan-x pinch-zoom");
});

显然,这部分不起作用:$('.zoom').css("touch-action","pan-x pinch-zoom");

谢谢!

最佳答案

您可以使用同级:.notouch.content

.notouch 将覆盖所有页面,.content 将包含可能会受到触摸交互影响的元素。

<body>
<div class="notouch"></div>
<div class="content">
<div class="image"></div>
</div>
</body>
body {
position: relative;
}
.notouch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: none;
}
.content {
position: relative;
width: 0;
height: 0;
}
.image {
width: 200px;
height: 200px;
background: #d3d3d3;
}

像这样,您只能在 .image 中使用缩放。

关于javascript - body touch-action : none, 但能够捏缩放 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57671256/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com