twitter bootstrap 3移動滾動問題的模式

我目前在移動設備上使用twitter bootstrap 3模式。它在桌面上工作得非常好，但是在移動時，只要我滾動它也滾動模式後面的窗口。我如何防止這種情況發生？twitter bootstrap 3移動滾動問題的模式

2014-01-09 adit

您是否能夠識別「有時」？你可以發佈你的代碼或重新創建一個[Bootply]（http://bootply.com） – ZimSystem

@Skelly它不是有時，它是所有的時間 – adit

自舉3

我發現這個問題的解決辦法，這似乎是對我的網站不夠好。

CSS：

body.modal-open > .wrap { 
    overflow: hidden; 
    height: 100%; 
} 

.modal-content, 
.modal-dialog, 
.modal-body { 
    height: inherit; 
    min-height: 100%; 
} 

.modal { 
    min-height: 100%; 
}

HTML：

<body> 
    <div class="wrap">All non-modal content</div> 
    <div class="modal"></div> 
</body>

所以在這一個模式是開放的情況下，所有非模態的內容僅限於視口的高度和溢出是隱藏的，這可以防止主站點滾動，而模式仍然可以滾動。

編輯：此修補程序有在Firefox中的一些問題。

修正了我的網站是（FF僅媒體查詢）：

@-moz-document url-prefix() { 
    .modal-body { height: auto; min-height: 100%; } 
    .modal { height: auto; min-height: 100%; } 
    .modal-dialog { 
    width: 100%; 
    height: 100%; 
    min-height: 100%; 
    padding: 0; 
    margin: 0; 
    top: 0; 
    left: 0; 
    } 

    .modal-content { 
    height: auto; 
    min-height: 100%; 
    border-radius: 0; 
    border: 0px solid #000; 
    margin: 0; 
    padding: 0; 
    top: 0; 
    left: 0; 
    } 

}

來源

2014-03-15 11:20:11

真棒，這是迄今爲止最好的解決方案..應該已經添加這個作爲一個pull請求引導回購 – adit

似乎所有的擬合，你，@adit，會想_add it_;） –

border：0px固體透明本來會更好;）沒有，這是最好的解決方案 - 我搜索了很多！ – Guntram

我已經注意到它只在模式下滾動背景頁面，當你點擊模式的底部時，如果你試圖保持向下滾動，它會滾動背景頁面。看看右側的溢出條，它只是在模式打開時顯示（在Chrome-Android上）

似乎效果是將模式滾動到模態範圍，然後自動滾動背景頁面，即使莫代爾仍然是開放的。

來源

2014-01-14 02:18:29

我正在體驗你剛纔說的 – adit

這是在官方文檔中提到的：http ：//getbootstrap.com/getting-started/#support-fixed-position-keyboards – cvrebert

這是對問題的評論還是嘗試回答？ –

有趣的是，他們解決這個問題的文檔沒有解決的辦法，提供了：

「支持溢出：在<body>元素上隱藏的內容在iOS和Android中相當有限，爲此，當您在這些設備的瀏覽器中滾動瀏覽模式的頂部或底部時，<body>內容將開始滾動。

http://getbootstrap.com/getting-started/#overflow-and-scrolling

來源

2015-05-05 23:24:21 wesww

嘿，夥計們，所以我想我找到了解決的引導3.這是爲我工作在iPhone和Android的時刻。它是一個數小時搜索，閱讀和測試的混搭。所以，如果你看到你的代碼的一部分在這裏信用去你大聲笑。

@media only screen and (max-device-width:768px){ 

body.modal-open { 
// block scroll for mobile; 
// causes underlying page to jump to top; 
// prevents scrolling on all screens 
overflow: hidden; 
position: fixed; 
} 
} 

body.viewport-lg { 
// block scroll for desktop; 
// will not jump to top; 
// will not prevent scroll on mobile 
position: absolute; 
} 

body { 
overflow-x: hidden; 
overflow-y: scroll !important; 
}

究其原因，具體的媒體上有一個桌面我是有當模式將打開的網頁上的所有內容從中心到左將轉移問題上。看起來像廢話。因此，這將針對您需要滾動的平板電腦尺寸設備。手機和平板電腦仍有輕微的變化，但其實並不多。讓我知道這是否適合你們。希望這將釘在棺材

來源

2015-08-20 14:59:10 JoeyD

它的工作原理，但在手機上滾動到頂部，這很煩人。 – tomericco

是的，當我今天在我的iphone 6s上遇到這個問題時，這是非常煩人的。

這似乎仍然是一個問題，即使是最新的引導（3.3。6）。

CSS的QuickFix解決方案：「到，而模式是打開的網頁頂部的‘

body.modal-open { position: fixed; }

’請注意，這有副作用」滾動

查看有關該解決方案的詳細信息here

使用Javascript/jQuery的解決方案：

一個更好的解決辦法是利用bootstrap's modal events。該解決方案集成了quickfix方法，但解決了「頁面頂部」問題。然後，您可以根據需要根據事件更改CSS。

在我的代碼中，我在事件show.bs.modal（該值用於修復'quickfix'問題）上設置窗口的當前位置。

然後，我在shown.bs.modal事件上應用css快速修復。換句話說，模式彈出之後。

最後，當模式關閉時，我將身體的位置切換到相對位置（可以設置爲靜態，我相信），並將窗口滾動回原來的位置。

// set current position 
var cPosition = false; 

$('.modal').on('show.bs.modal', function(){ 

    cPosition = $(window).scrollTop(); 
}) 
.on('shown.bs.modal', function(){ 

    $('body').css({ 
     position:'fixed' 
    }); 

}) 
.on('hide.bs.modal', function(){ 

    $('body').css({ 
     position:'relative' 
    }); 

    window.scrollTo(0, cPosition); 

});

應該比較簡單地爲任何具有一定javascript經驗的人設置。

希望他們能夠在bootstrap 4中解決這個問題，但在此之前，希望這個答案可以幫助其他有類似問題的人。

來源

2016-02-19 01:16:18 Truchainz

對於引導3

我發現用於移動設備（觸摸屏）與iscroll.js

在模態加載的內容的解決方案：

<div id="smartScroll"> Content of the modal </div>

要初始化上的.js

var myScroll = new IScroll('#smartScroll', { 
    mouseWheel: true, 
    scrollbars: true, 
    click: true 
});

來源

2017-06-22 10:10:52 Ferhat

twitter bootstrap 3移動滾動問題的模式

回答

相關問題