首页 > 解决方案 > 当我点击 Instagram 的链接时,为什么我无法在应用内浏览器中禁用滚动?

问题描述

我在应用内浏览器中遇到垂直滚动问题。

这就是我尝试从 Instagram 打开网站时看到的方式

这就是我在 Safari 中看到我的网站的方式

我用的是 iPhone SE。

这就是我试图修复它的方式。但我所能做的就是从工具栏下方抬起按钮,但我没有解决滚动问题。

function setHeight() {
    
    // Get window height without browser toolbar
    var windowsHeight = window.innerHeight;
    // I tried fix the problem by this way, but I think it's not smart
    var forinsta = windowsHeight - 70;

    // Determine where the user gets to the site
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    var isInstagram = (ua.indexOf('Instagram') > -1) ? true : false;

    if (isInstagram) {
        // If user gets to the site from Instagram, I set innerHeight -70px
        document.getElementById('wrapper').style.height = forinsta + 'px';
        document.body.style.height = forinsta + 'px';

    } else {
        // Else just set innerHeight
        document.getElementById('wrapper').style.height = windowsHeight + 'px';
        document.body.style.height = windowsHeight + 'px';
    }
}

setHeight();

window.onresize = function (event) {
    setHeight();
};
html{
  position: relative;
  overflow: hidden;
  height: 100%;
}
body {
  font: 16px Arial, Helvetica, sans-serif;
  line-height: 1.4;
  overflow: hidden;
  position: relative;
  height: 100%;
}
#wrapper{
  position: relative;
  overflow: hidden;
  height: 100%;
}


//Swiper
.swiper-container {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
<div id="wrapper">

    <div class="swiper-container">
        <!-- I use swiper.js -->
        Slider Content
    </div>

</div>

标签: javascripthtmlcsssafariinappbrowser

解决方案


推荐阅读