Jump to content
  • Как отключить любую прокрутку на сайте?

    Очень часто может потребоваться отключение скролла на сайте. То есть, чтобы посетители не могли прокручивать страницу.


    Это в Muse сделать не сложно. Причем есть сразу три варианта. Все что нужно сделать:

    • Скопировать код из этого урока
    • Вставить его в Свойства страницы - HTML для <head>

    Если Вы хотите скрыть горизонтальную прокрутку (влево-вправо) то используйте этот скрипт:

    <style>html { overflow-x: hidden; }</style>

    Если Вы хотите скрыть вертикальную прокрутку (вверх-вниз) используйте этот скрипт:

    <style>html { overflow-y: hidden; }</style>

    Если Вы хотите скрыть и горизонтальный и вертикальные скролл, то используйте этот код:

    <style>html { overflow: hidden; }</style>

    Эти три скрипта отключают только сами ползунки прокрутки, но возможность прокрутки остается.

    Чтобы совсем убрать возможность прокручивать используйте этот код:

    <style>
    html,body {overflow:hidden}
    </style>
    <script>
    document.onmousewheel = document.onwheel = function() {
    return false;
    };
    
    document.addEventListener ("MozMousePixelScroll",
    function() { return false }, false);
    
    document.onkeydown = function(e) {
    if (e.keyCode >= 33 && e.keyCode <= 40) return false;
    }
    </script>

    Кстати, Вы так же можете настроить плавный скроллинг страницы, настроить внешний вид ползунка, регулировать скорость прокрутки и многое другое с помощью этого виджета:

    Ссылка на виджет управления прокруткой

    Вопросы по уроку задавайте в комментариях ниже.

    User Feedback

    Recommended Comments

    Скажите, а как сделать так, чтобы задний фон оставался на месте, а весь остальной контент сдвигался либо вниз, либо вверх?! Спасибо )

    Share this comment


    Link to comment
    Share on other sites

    Доброго времени суток, Евгений! Код вставил (<style>html { overflow: hidden; }</style>), но вместе с исчезновением полосы прокрутки, исчезла возможность этой самой прокрутки, только переход по "якорным ссылкам остался". Как можно это исправить?

    Share this comment


    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Restore formatting

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...