Как отключить полосу прокрутки на веб-странице? (не скрывать полосу прокрутки)

с помощью:

$('body,html').css("overflow","hidden");

полоса прокрутки на странице смогла полностью скрыться. Но я хочу, чтобы полоса прокрутки была просто ОТКЛЮЧЕНА во время какого-либо события AJAX. Позже, используя:

$('body,html').css("overflow","visible");

В моем успехе AJAX мне пришлось снова включить прокрутку для полной страницы.

(например, удаление прокрутки с панели прокрутки и отключение стрелок прокрутки) , но в этом окне все еще отображается полоса прокрутки Это предотвратит изменение ширины страницы.

Есть ли возможность сделать это? Любая помощь ценится. Заранее спасибо.

12 голосов | спросил ram 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 17 Sep 2013 16:26:43 +0400 2013, 16:26:43

4 ответа


0

Хорошо, вот рабочий код:

body
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

Я использовал это и то же самое, что вы хотите.

ответил Hassan Sardar 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 17 Sep 2013 16:42:15 +0400 2013, 16:42:15
0

Попробуйте это

<style type="text/css">
  body {
         overflow:hidden;
       }
</style>
ответил Ajay P 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 17 Sep 2013 16:42:54 +0400 2013, 16:42:54
0

Если вы хотите отключить функцию щелчка и перетаскивания полосы прокрутки, вы можете отобразить скрытый div перед полосой прокрутки с помощью position: fixed; top: 0; right: 0; height: 100%; width: 25px;

http://jsfiddle.net/Bg9zp/ (htm-класс может быть вашим html /body)

Таким образом, он отключен для кликов, но функция прокрутки не отключена. (вы можете прокручивать с помощью колесика мыши и с помощью «выделять текст, вытаскивая мышь из текстового поля»)

Если вы хотите отключить функцию прокрутки, вам нужно добавить еще один div, который отключает пользовательский ввод без «disabled-opacity»:

http://jsfiddle.net/dKP53/ (htm-класс может быть вашим html /body)

ответил Varon 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 17 Sep 2013 16:44:56 +0400 2013, 16:44:56
0

У меня была такая же проблема. Я думаю, что нет решения с CSS, потому что оно не реализовано напрямую.

Я нашел 2 решения, но мне больше нравится второе:

  1. Установите поля самостоятельно с помощью JS, а не с помощью CSS. Полоса прокрутки имеет ширину 17 пикселей, поэтому поля вы получите, как в примере кода. если вам не нужна блокировка прокрутки, просто установите margin:auto; overflow-y:auto; еще раз. Недостатком этого метода является то, что когда пользователь увеличивает масштаб изображения, он может не видеть оставшуюся часть div.

    margin-left = (bodywidth - sitewidth) / 2 - 17;
    margin-right = (bodywidth - sitewidth) / 2 + 17;
    overflow-y:hidden;
    
  2. Заблокируйте прокрутку с помощью JS. Возьмите событие window.onscroll. Возьмите scrollMethod2, это сложнее, но лучше почти любым способом. Это отлично работает для меня без задержки (не «бумеранг», вы действительно остаетесь в позиции прокрутки (scrollMethod) или в прокручиваемой части (scrollMethod2)). Вот образец:

    // scroll lock needed? Set it in your method
    var scrollLock = false;
    window.onresize = function() {
        if (scrollLock) {
            scrollMethod();
        }
    }
    
    // Set here your fix scroll position
    var fixYScrollPosition = 0;
    // this method makes that you only can scroll horizontal
    function scrollMethod(){
        // scrolls to position
        window.scrollTo(window.scrollX, fixYScrollPosition); // window.scrollX gives actual position
    }
    
    // when you zoom in or you have a div which is scrollable, you can watch only the height of the div
    function scrollMethod2() {
        var windowHeight = window.innerHeight;
        // the actual y scroll position
        var scrollHeight = window.scrollY;
        // the height of the div under the window
        var restHeight = scrollableDivHeight - (scrollHeight + windowHeight);
        // the height of the div over the window
        var topDivHeight = scrollHeight - /* the height of the content over the div */;
        // Set the scroll position if needed
        if (restHeight <= 0) {
            // don't let the user go under the div
            window.scrollTo(window.scrollX, scrollHeight + restHeight);
        }
        else if (scrollHeight - /* the height of the content over the div */ < 0) {
            // don't let the user go over the div
            window.scrollTo(window.scrollX, scrollHeight - topDivHeight);
        }
    }
    

Надеюсь, все правильно. Спасибо за чтение, надеюсь, что это поможет вам или дало вам представление, как это сделать:)

EDIT: Вы также можете скрыть стандартную полосу прокрутки и заменить ее на пользовательскую. Здесь вы можете найти несколько примеров.

ответил This man again 23 FriEurope/Moscow2016-12-23T10:54:21+03:00Europe/Moscow12bEurope/MoscowFri, 23 Dec 2016 10:54:21 +0300 2016, 10:54:21

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132