Mam stronę internetową z wyrównanym centralnie DIV. Teraz niektóre strony wymagają przewijania, niektóre nie. Kiedy przechodzę od jednego typu do drugiego, wygląd paska przewijania przesuwa stronę o kilka pikseli w bok. Czy jest jakiś sposób, aby tego uniknąć bez wyraźnego wyświetlania pasków przewijania na każdej stronie?
Odpowiedzi:
przepełnienie-y: przewijanie jest poprawne, ale powinieneś go używać z tagiem html, a nie z treścią, bo w IE 7 pojawia się podwójny pasek przewijania
Tak więc poprawny css byłby:
html {
overflow-y: scroll;
}Zawiń zawartość przewijalnego elementu w div i zastosuj padding-left: calc(100vw - 100%);.
<body>
<div style="padding-left: calc(100vw - 100%);">
Some Content that is higher than the user's screen
</div>
</body>Sztuczka polega na tym, że 100vwreprezentuje 100% rzutni, w tym pasek przewijania. Po odjęciu 100%, czyli dostępnej przestrzeni bez paska przewijania, kończy się szerokość paska przewijania lub 0jego brak. Utworzenie dopełnienia o tej szerokości po lewej stronie zasymuluje drugi pasek przewijania, przesuwając wyśrodkowaną treść z powrotem w prawo.
Pamiętaj, że zadziała to tylko wtedy, gdy przewijalny element wykorzystuje całą szerokość strony, ale nie powinno to stanowić większego problemu, ponieważ istnieje tylko kilka innych przypadków, w których wyśrodkowałeś przewijaną zawartość.
100vwi 100%mierzyłem różne rzeczy, więc nauczyłem się z tego czegoś pożytecznego!
@media screen and (min-width: 800px) {...} . W przypadkach, gdy treść będzie pasować do szerokości strony. Na przykład przy małych rozdzielczościach pojawi się niepotrzebna luka, przesuwająca treść w prawo
Myślę, że nie. Ale stylizacji bodyze overflow: scrollpowinien robić. Wydaje się, że o tym wiesz.
overflow-y: scroll:)
Z przewijaniem zawsze wyświetlanym, być może nie jest dobry dla układu.
Spróbuj ograniczyć szerokość ciała za pomocą css3
body {
width: calc(100vw - 34px);
}vwto szerokość rzutni (zobacz ten link w celu wyjaśnienia)
calcoblicz w css3
34pxoznacza podwójną szerokość paska przewijania (zobacz to dla stałej lub to do obliczenia, jeśli nie ufasz ustalonym rozmiarom)
padding-left: 34px;aby równomiernie wyśrodkować stronę.
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}Przykład . Kliknij przycisk „zmień minimalną wysokość”.
Za pomocą calc(100vw - 100%)możemy obliczyć szerokość paska przewijania (a jeśli nie zostanie wyświetlony, będzie wynosił 0). Pomysł: używając ujemnego marginesu z prawej strony, możemy zwiększyć szerokość <html>do tej szerokości. Zobaczysz poziomy pasek przewijania - należy go ukryć za pomocą overflow-x: hidden.
calc(100% - 100vw)zamiast pomnożyć przez -1?
Nie wiem, czy to stary post, ale miałem ten sam problem i jeśli chcesz przewijać w pionie, tylko powinieneś spróbować overflow-y:scroll
Jeśli zmieniasz rozmiar lub po załadowaniu niektórych danych dodajesz pasek przewijania, możesz spróbować wykonać, utworzyć klasę i zastosować tę klasę.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}Rozwiązałem problem na jednej z moich stron internetowych, jawnie ustawiając szerokość ciała w javascript według rozmiaru okienka ekranu pomniejszonego o szerokość paska przewijania. Używam udokumentowanej tutaj funkcji opartej na jQuery , aby określić szerokość paska przewijania.
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";Rozwijanie odpowiedzi za pomocą tego:
body {
width: calc(100vw - 17px);
}Jeden z komentatorów zasugerował dodanie lewy dopełnienie również w celu utrzymania centrowania:
body {
padding-left: 17px;
width: calc(100vw - 17px);
}Ale wtedy rzeczy nie wyglądają poprawnie, jeśli treść jest szersza niż rzutnia. Aby to naprawić, możesz użyć zapytań o media, takich jak to:
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}Gdzie 1058px = szerokość treści + 17 * 2
Dzięki temu poziomy pasek przewijania obsługuje przepełnienie x i utrzymuje wyśrodkowaną treść w środku, gdy rzutnia jest wystarczająco szeroka, aby pomieścić zawartość o stałej szerokości
Poza odpowiedzią Rapti powinno to działać równie dobrze, ale dodaje więcej marginesu po prawej stronie bodyi ukrywa go z htmlmarginesem ujemnym , zamiast dodawać dodatkowe wypełnienie, które może potencjalnie wpłynąć na układ strony. W ten sposób nic się nie zmienia na rzeczywistej stronie (w większości przypadków), a kod nadal działa.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}overflow-x: hiddeni to naprawiło.
Rozwiązanie @ kashesandr działało dla mnie, ale aby ukryć poziomy pasek przewijania, dodałem jeszcze jeden styl dla ciała. oto kompletne rozwiązanie:
CSS
<style>
/* prevent layout shifting and hide horizontal scroll */
html {
width: 100vw;
}
body {
overflow-x: hidden;
}
</style>JS
$(function(){
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
});Tylko rozwiązanie JS (gdy 2. modal otwiera się od 1. modalu):
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
$('body').css('padding-right', 17);
}
});Próbowałem naprawić prawdopodobnie ten sam problem, który był spowodowany .modal-openzastosowaną klasą bootowania na Twitterze body. Rozwiązanie html {overflow-y: scroll}nie pomaga. Jednym z możliwych rozwiązań jest dodanie {width: 100%; width: 100vw}do htmlelementu.
html { width: 100vw; }pracował dla mnie
Zwykle mam ten problem, ale najprostszym sposobem rozwiązania tego problemu jest (działa dla mnie):
na typ pliku CSS:
body{overflow-y:scroll;}tak proste! :)
Rozwiązania opublikowane przy użyciu funkcji calc (100vw - 100%) są na dobrej drodze, ale jest z tym problem: na zawsze będziesz mieć margines po lewej stronie rozmiaru paska przewijania, nawet jeśli zmienisz rozmiar okna, aby zawartość wypełnia całą rzutnię.
Jeśli spróbujesz obejść ten problem za pomocą zapytania o media, będziesz miał niezręczny moment przyciągania, ponieważ margines nie będzie stopniowo zmniejszał się podczas zmiany rozmiaru okna.
Oto rozwiązanie, które obejdzie ten problem, a AFAIK nie ma wad:
Zamiast używać marginesu: auto do centrowania treści, użyj tego:
body {
margin-left: calc(50vw - 500px);
}Zamień 500px na połowę maksymalnej szerokości treści (więc w tym przykładzie maksymalna szerokość treści to 1000px). Zawartość pozostanie wyśrodkowana, a margines będzie stopniowo zmniejszał się do końca, aż zawartość wypełni obszar ekranu.
Aby zatrzymać margines przed ujemnym, gdy rzutnia jest mniejsza niż maksymalna szerokość, po prostu dodaj zapytanie medialne:
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}Zrobione!
Jeśli szerokość tabeli się nie zmieni, możesz ustawić szerokość elementu (np. Tbody) zawierającego pasek przewijania> 100% (pozwalając na dodatkowe miejsce dla paska przewijania) i ustawić overflow-y na „nakładkę” (więc że pasek przewijania pozostaje stały i nie przesunie tabeli w lewo, gdy się pojawi. Ustaw także stałą wysokość elementu za pomocą paska przewijania, aby pasek przewijania pojawił się po przekroczeniu wysokości. Tak jak:
tbody {
height: 100px;
overflow-y: overlay;
width: 105%
}Uwaga: będziesz musiał ręcznie ustawić szerokość%, ponieważ% miejsca zajmowanego przez pasek przewijania będzie zależny od szerokości stołu (tj. Mniejsza szerokość stołu, więcej% wymagane do dopasowania paska przewijania, ponieważ jego rozmiar w pikselach jest stały )
Przykład tabeli dynamicznej:
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newRow = row.insertCell(i);
newRow.innerHTML = table.rows[0].cells[i].innerHTML;
newRow.childNodes[0].value = "";
}
}
function deleteRow(row)
{
var table = document.getElementById("data");
var rowCount = table.rows.length;
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById("data").deleteRow(rowIndex);
}.scroll-table {
border-collapse: collapse;
}
.scroll-table tbody {
display:block;
overflow-y:overlay;
height:60px;
width: 105%
}
.scroll-table tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.scroll-table thead tr {
display:block;
}
.scroll-table td {
border-top: thin solid;
border-bottom: thin solid;
}
.scroll-table td:first-child {
border-left: thin solid;
}
.scroll-table td:last-child {
border-right: thin solid;
}
.scroll-table tr:first-child {
display: none;
}
.delete_button {
background-color: red;
color: white;
}
.container {
display: inline-block;
}
body {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test_table.css">
</head>
<body>
<h1>Dynamic Table</h1>
<div class="container">
<table id="data" class="scroll-table">
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onclick="addRow('data')" />
</div>
<script src="test_table.js"></script>
</body>
</html>Użyłem trochę jquery do rozwiązania tego
$('html').css({
'overflow-y': 'hidden'
});
$(document).ready(function(){
$(window).load(function() {
$('html').css({
'overflow-y': ''
});
});
});@media screen and (min-width: 1024px){
body {
min-height: 700px
}
}W przeciwieństwie do przyjętej odpowiedzi, która sugeruje stały pasek przewijania w oknie przeglądarki, nawet jeśli zawartość nie przepełnia ekranu , wolałbym używać:
html{
height:101%;
}Wynika to z faktu, że wygląd paska przewijania ma większy sens, jeśli zawartość faktycznie się przepełnia .
overflow-y: overlayw tym wątku?