16

使用:

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

ページのスクロールバーが完全に非表示になりました。しかし、AJAXイベント中にスクロールバーを無効にしたいのです。後で使用：

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

AJAX の成功では、ページ全体のスクロールを再度有効にする必要がありました。

（スクロールバーからスクロールボックスを削除してスクロール矢印を無効にするのと同じように）それでもウィンドウにスクロールバーが表示されます。これにより、その間にページ幅が変更されるのを防ぐことができます。

そうする可能性はありますか？どんな助けでも感謝します。前もって感謝します。

4

4 に答える 4

0

私も同じ問題を抱えていました。CSSは直接実装されていないため、CSSでの解決策はないと思います。

私は2つの解決策を見つけましたが、2番目の解決策がもっと好きです:

  1. CSS ではなく JS でマージンを自分で設定します。スクロールバーの幅は 17px なので、コード サンプルのように余白が得られます。スクロールロックが不要な場合は、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);
    }
}

すべてが正しいことを願っています。読んでくれてありがとう、これがあなたに役立つか、アイデアを与えてくれることを願っています。

編集: 標準のスクロールバーを非表示にして、カスタムのスクロールバーに置き換えることもできます。ここにいくつかの例があります。

于 2016-12-23T07:54:21.777 に答える