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

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now
×