Остановить «функцию JavaScript, запускающую ширину CSS», от воздействия на положение экрана прокрутки (на мобильном устройстве) - PullRequest
Новая
       10

Остановить «функцию JavaScript, запускающую ширину CSS», от воздействия на положение экрана прокрутки (на мобильном устройстве)

3 голосов
/ 17 октября 2019

Это может быть простой вопрос, который нужно исправить, но я изо всех сил пытался:

На этой веб-странице индексная страница, если вы прокрутите немного вниз до интерактивной карты.

Эта проблема также возникает в веб-браузере на ноутбуке. (Только что обнаружен!

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>

НО странно то, что когда вы закрываете раздел с помощью этой кнопки на «МОБИЛЬНЫХ УСТРОЙСТВАХ», экранподнимется и заставит карту прикрепиться вверху экрана.

Хотел бы я отменить этот эффект.

:) Может кто-нибудь решить это? :)

Если вам нужно увидеть настройку 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>

Надеюсь, это не слишком сложно:)

1 Ответ

0 голосов
/ 24 октября 2019

Удивительно, но решение настолько глупо: избавиться от: 

href="#"

от <a> элемента ...

...