阻止 'JavaScript function triggering css width' 影响滚动屏幕位置（在移动设备上）

Question

这可能是一个很容易解决的问题，但我很费力：

在此 website 索引页面上，如果您向下滚动一点到交互式地图。

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

ps。这是一个嵌入式地图作为 iframe html！查看来源 html:

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

基本上点击很多（区域）后，信息部分就会出现。（这是从 QGIS 的传单网络地图制作的）--> 我在这里更改了 JS 代码以显示滑块信息：

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});

在传单索引页的末尾，我得到了一个更接近JS函数的部分：

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

但奇怪的是，当您使用 "MOBILE DEVICES" 上的那个按钮关闭该部分时，屏幕会跳转并使地图停留在屏幕顶部。

我希望我能取消这个效果。

:) 谁能解决？ :)

如果您需要查看该滑块的 css 设置，请点击此处：

<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> 元素...

阻止 'JavaScript function triggering css width' 影响滚动屏幕位置（在移动设备上）

Stop 'JavaScript function triggering css width' from affecting scrolling-screen position (On Mobile device)

javascript

css

qgis

responsive-design

leaflet