javascript - 阻止 'JavaScript function triggering css width' 影响滚动屏幕位置(在移动设备上)

Question

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

在此website索引页面，如果您向下滚动到交互式 map 。

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

附言。这是作为 iframe html 的嵌入式 map !查看源代码:

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

基本上点击很多(区域)后，信息部分就会出现。 (这是从 QGIS 的传单网络 map 制作的)--> 我在这里更改了 JS 代码以显示 slider 信息:

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>

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

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

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

如果您需要查看该 slider 的 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>元素...