停止“JavaScript function 触发 css 宽度”影响滚动屏幕 position（在移动设备上）

Question

这可能是一个要解决的简单问题，但我很努力：

在这个网站索引页面上，如果你向下滚动一点到交互式 map。

这个问题也出现在笔记本电脑上的 web 浏览器上。（刚刚发现！

附言。 这是一个嵌入式 map 作为 iframe html：参见源代码 html：

<iframe id="iframe" width="100%" height="620px" src="leaflet_v1/index.html"></iframe>

基本上在你点击很多（区域）之后，信息部分就会出现。 （这是由来自 QGIS 的 leaflet web map 制成的）--> 我在此处更改了 JS 代码以使 Z107ZBF508F0BBDAE44685 出现

function popup(){
                document.getElementById('slider').style.width='75%';
                document.getElementById('slider').style.zIndex='1000';
                //..then insert data
                //.. put a inline html for js Close function
            }

layer.bindPopup(popup, {maxHeight: 400});

在 leaflet 索引页的末尾，我得到了一个更接近 JS function 的部分：

   <script>
    function CloseSlider(){
        document.getElementById('slider').style.width='1px';
    }
   </script>

但奇怪的是，当您使用“移动设备”上的那个按钮关闭该部分时，屏幕会跳起来并使 map 粘在屏幕顶部。

我希望我可以取消这个效果。

:) 任何人都可以解决它吗？ :)

如果您需要查看 slider 的 css 设置，这里是 go：

<style>
    .slider{
        height: 100%;
        width:2px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color:rgb(39,57,66);
        opacity: 0.90;
        padding-left: 20px;
        padding-top: 20px;
        overflow-x: hidden;
        transition: 0.3s;
    }


    .slider a{
        padding: 5px 20px 5px 0px;
        text-decoration: none;
        font-size: 15px;
        color: pink;
        display: block;
        transition: 0.3s;
    }

    .slider a:hover{
        background-color:rgb(39,57,66);
        color: white;
    }

    .slider .btn-close{
        position: absolute;
        top:0;
        right: 10px;
        font-size: 35px;
        margin-left: 30px;
    }



    </style>

希望这不是太复杂:)

Answer 1

令人惊讶的是，解决方案是如此愚蠢：摆脱：

href="#"

从<a>元素...