Merkeze hizalanmış DIV'ye sahip bir web sitem var. Şimdi, bazı sayfaların kaydırılması gerekiyor, bazı sayfaların kaydırılmaması gerekiyor. Bir türden diğerine geçtiğimde, kaydırma çubuğunun görünümü sayfayı birkaç piksel yana kaydırır. Her sayfada kaydırma çubuklarını açıkça göstermeden bundan kaçınmanın bir yolu var mı?
Yanıtlar:
overflow-y: scroll doğru, ancak html etiketi ile kullanmalısınız, gövde değil ya da IE 7'de çift kaydırma çubuğu alıyorsunuz
. Doğru css şöyle olurdu:
html {
overflow-y: scroll;
}
Kaydırılabilir öğenizin içeriğini bir div içine sarın ve uygulayın 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>
Hile, 100vwkaydırma çubuğu dahil görünüm penceresinin% 100'ünü temsil eder. 100%Kaydırma çubuğu olmayan kullanılabilir alan olan çıkartırsanız , kaydırma çubuğunun genişliği ile veya 0yoksa bulunursunuz. Solda bu genişlikte bir dolgu oluşturmak, ortalanmış içeriği tekrar sağa kaydırarak ikinci bir kaydırma çubuğunu simüle eder.
Bunun yalnızca kaydırılabilir öğenin sayfanın tüm genişliğini kullanması durumunda işe yarayacağını unutmayın, ancak kaydırılabilir içeriği ortaladığınız yalnızca birkaç durum olduğundan bu çoğu zaman sorun olmamalıdır.
100vwve 100%farklı şeyleri ölçmüştüm, bu yüzden bundan yararlı bir şey öğrendim!
@media screen and (min-width: 800px) {...} . İçeriğin sayfa genişliğine sığacağı durumlarda. Örneğin, küçük çözünürlüklerde içeriği sağa kaydıran gereksiz boşluk olacaktır
Bence değil. Ama stil bodyile overflow: scrollyapmak gerekir. Yine de bunu biliyor gibisin.
overflow-y: scroll:)
Kaydırma her zaman gösterildiğinde, düzen için iyi olmayabilir.
Css3 ile gövde genişliğini sınırlamaya çalışın
body {
width: calc(100vw - 34px);
}vwgörünümün genişliği (bkz bu bağlantıyı bazı açıklama)
calcCSS3 içinde hesapla
34px(bkz çift kaydırma genişliği açılımı bu sabit veya bu hesaplamak için size sabit boyutlarda güvenmiyorsan)
padding-left: 34px;sayfamı eşit olarak ortalamak için ekledim .
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}Örnek . "Min. Yüksekliği değiştir" düğmesini tıklayın.
İle calc(100vw - 100%)kaydırma çubuğunun genişliğini hesaplayabiliriz (ve görüntülenmezse 0 olacaktır). Fikir: negatif kenar boşluğu kullanarak, genişliğini <html>bu genişliğe artırabiliriz . Yatay bir kaydırma çubuğu göreceksiniz - kullanılarak gizlenmelidir overflow-x: hidden.
calc(100% - 100vw)çarpmak yerine kullanmıyorsunuz -1?
Bu eski bir yazı olup olmadığını bilmiyorum, ama aynı sorunu vardı ve dikey olarak kaydırmak istiyorsanız sadece denemelisiniz overflow-y:scroll
Boyutu değiştiriyorsa veya bazı verileri yükledikten sonra kaydırma çubuğunu ekliyorsa, aşağıdakileri deneyebilir, sınıf oluşturabilir ve bu sınıfı uygulayabilirsiniz.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}Web sitelerimden birinde sorunu, javascript'te gövde genişliğini, görünüm çubuğunun genişliği eksi kaydırma çubuğunun genişliğine göre ayarlayarak çözdüm. Kaydırma çubuğunun genişliğini belirlemek için burada belgelenen jQuery tabanlı bir işlev kullanıyorum .
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";Bunu kullanarak cevabı genişletmek:
body {
width: calc(100vw - 17px);
}Bir yorumcu, merkezlemeyi korumak için sol dolgu eklemeyi de önerdi:
body {
padding-left: 17px;
width: calc(100vw - 17px);
}Ancak, içeriğiniz görünüm penceresinden daha genişse işler doğru görünmez. Bunu düzeltmek için aşağıdaki gibi medya sorguları kullanabilirsiniz:
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}1058 piksel = içerik genişliği + 17 * 2
Bu, yatay kaydırma çubuğunun x taşmasını yönetmesine olanak tanır ve görünüm sabit genişlikteki içeriğinizi içerecek kadar geniş olduğunda ortalanmış içeriği ortalar
Rapti'nin cevabını uzatan bu da işe yarayacak, ancak sayfanın düzenini potansiyel olarak etkileyebilecek ekstra dolgu eklemek yerine , sağ tarafına daha fazla kenar boşluğu ekliyor bodyve negatif htmlkenar boşluğu ile gizliyor . Bu şekilde, gerçek sayfada hiçbir şey değiştirilmez (çoğu durumda) ve kod hala işlevseldir.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}overflow-x: hiddenve bu düzeltti.
@ kashesandr'in çözümü benim için çalıştı ama yatay kaydırma çubuğunu gizlemek için vücut için bir stil daha ekledim. İşte tam çözüm:
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');
}
});
});Yalnızca JS Çözümü (1. moddan 2. mod açıldığında):
/**
* 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);
}
});Muhtemelen .modal-openuygulanan twitter bootstrap sınıfının neden olduğu aynı sorunu düzeltmeye çalıştım body. Çözüm işe html {overflow-y: scroll}yaramıyor. Bulduğum olası bir çözüm {width: 100%; width: 100vw}, htmlöğeye eklemektir .
html { width: 100vw; }benim için çalıştı
Ben bu sorunu için kullanın, ama bunu düzeltmek için basit yolu bu (bu benim için çalışıyor):
CSS dosya türünde:
body{overflow-y:scroll;}bu kadar basit! :)
Calc (100vw -% 100) kullanılarak gönderilen çözümler doğru yoldadır, ancak bununla ilgili bir sorun vardır: Pencereyi yeniden boyutlandırsanız bile, kaydırma çubuğunun boyutunda sonsuza kadar solda bir kenar boşluğunuz olacaktır. içerik tüm görünümü doldurur.
Bir medya sorgusu ile bunun üstesinden gelmeye çalışırsanız, pencereyi yeniden boyutlandırdığınızda kenar boşluğu gittikçe küçülmeyeceğinden garip bir yakalama anına sahip olursunuz.
İşte bunun üstesinden gelen bir çözüm ve AFAIK'in dezavantajları yok:
İçeriğinizi ortalamak için margin: auto kullanmak yerine şunu kullanın:
body {
margin-left: calc(50vw - 500px);
}500 piksel'i içeriğinizin maksimum genişliğinin yarısı ile değiştirin (bu nedenle bu örnekte maksimum içerik genişliği 1000 pikseldir). İçerik şimdi ortalanacak ve içerik görünüm alanını doldurana kadar kenar boşluğu kademeli olarak azalacaktır.
Görünüm alanı maksimum genişlikten küçük olduğunda kenar boşluğunun negatif olmasını önlemek için aşağıdaki gibi bir medya sorgusu ekleyin:
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}Et voilà!
Tablonun genişliği değişmezse, kaydırma çubuğunu içeren öğenin (tbody gibi) genişliğini>% 100 (kaydırma çubuğu için fazladan boşluk bırakarak) ve taşma y değerini "kaplama" olarak ayarlayabilirsiniz (böylece kaydırma çubuğunun sabit kaldığını ve göründüğünde tabloyu sola kaydırmayacağını unutmayın). Ayrıca kaydırma çubuğuna sahip öğe için sabit bir yükseklik ayarlayın, böylece yükseklik aşıldığında kaydırma çubuğu görünecektir. Şöyle ki:
tbody {
height: 100px;
overflow-y: overlay;
width: 105%
}Not: Kaydırma çubuğunun kapladığı alanın yüzdesi tablonuzun genişliğine bağlı olacağı için% genişliğini manuel olarak ayarlamanız gerekir (yani: tablonun genişliği daha küçük, piksel cinsinden boyutu sabit olduğundan kaydırma çubuğuna sığması için% daha fazla gerekir )
Dinamik tablo örneği:
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>Bunu çözmek için biraz jquery kullandım
$('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
}
}İçerik ekrandan taşmasa bile tarayıcı penceresinde kalıcı bir kaydırma çubuğu öneren kabul edilen cevabın aksine , şunu kullanmayı tercih ederim:
html{
height:101%;
}Bunun nedeni, içeriğin gerçekten taşması durumunda kaydırma çubuğunun görünümünün daha anlamlı olmasıdır .
overflow-y: overlay?