1

Есть такой код:

$(document).ready(function(){
    var $page = $('html, body');
    $('a[href*="#"]').click(function() {
        $page.animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 400);
        return false;
    });
});
#box {
  margin-top: 2200px;
}

.show {
  display: none;
  background: aquamarine;
  width: 130px;
  text-align: center;
}

a:hover ~ .show {
 display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#box">Scroll BOX!</a>
<div class="show">
  Text text text yo
 </div>
 
<div id="box">
  <h2> Hi Scroll! </h2>
</div>

Что меня волнует: на iOS(iPhone) при нажатии на ссылку срабатывает :hover, при втором нажатии происходит scroll. Всё круто.

На Android же при нажати срабатывает :hover и скролл сразу. Как сделать чтобы на Android было такое же поведение? Или хотя бы какой-то компромисс.

1 ответ 1

1

Всё круто

IMHO: не круто. это неверное поведение.

как сделать по вашему ? - средствами JS

  1. определить мобильный браузер или десктопный, если мобильный
  2. по первому клику показывать. по второму - переходить

как сделать правильно ?

в приведённом ниже коде, не используется ни одной библиотеки,
а JavaScript используется исключительно для формирования HTML

let html = (a, ...b) => String.raw(a, ...b);
document.head.insertAdjacentHTML('beforeend', getStyle());
window.addEventListener('load', () => {
    let data = [
        ['a', 'b', '#box'],
        ['a', 'b', '#box'],
        ['a', 'b', '#box'],
    ];
    document.body.insertAdjacentHTML('beforeend', html `
        <header>${getNav(data)}</header>
        <section>
            <div id="box">
                <h2> Hi Scroll! </h2>
            </div>
        </section>
    `);
});
function getNav(arr) {
    let line = (arr) => html `
        <li>
            <ul>
                ${arr[2] ? html `
                <a href="${arr[2]}">
                    <li>${arr[1]}</li>
                </a>
                ` : null}
            </ul>
            ${arr[0]}
        </li>
        `;
    return html `
    <nav>
        <ul>
            ${arr.map(line).join('')}
        </ul>
    </nav>
    `;
}
function getStyle() {
    return html `<style>
        #box {
            margin-top: 2200px;
        }
        ul {
            margin: 0; /* Отступ слева в браузере IE и Opera */
            padding: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */
            display: inline-block;
            width: 70px;
        }
        li {
            list-style-type: none; /* Убираем маркеры */
            border-bottom: solid 1px;
        }
        ul li:hover {
            background-color: gray;
        }
        /* , */
        ul li ul {
            display: none;
            position: absolute;
            left: 78px;
        }
        ul li ul li {
            cursor: pointer;
        }
        ul li:hover ul {
            display: block;
        }
    </style>
    `;
}

3
  • мне как джуну трудно понять что тут написано ( 10 авг 2018 в 13:07
  • правая кнопка по менюшке(а,а,а) -> посмотреть код . там будет только html внутри iframe. копируй себе в index.html и изучай.
    – qwabra
    10 авг 2018 в 13:11
  • если есть желание понять что тут написано - рекомендую установить VSCode + плагин lit-html(подсвечивает html внутри js)
    – qwabra
    10 авг 2018 в 13:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.