Làm thế nào để ngăn thanh cuộn định vị lại trang web?

218

Tôi có một trang web với DIV liên kết trung tâm. Bây giờ, một số trang cần cuộn, một số thì không. Khi tôi di chuyển từ loại này sang loại khác, sự xuất hiện của thanh cuộn sẽ di chuyển trang một vài pixel sang một bên. Có cách nào để tránh điều này mà không hiển thị rõ ràng các thanh cuộn trên mỗi trang không?

html css

— Dmitri Nesteruk
nguồn

6

Tại sao không ai đề cập đến overflow-y: overlaytrong chủ đề này?

— vắt sữa

3

Theo các tài liệu mozilla, không overflow-y: overlayđược dùng nữa: developer.mozilla.org/en-US/docs/Web/CSS/overflow

— drojf

266

overflow-y: scroll là chính xác, nhưng bạn nên sử dụng nó với thẻ html, không phải phần thân hoặc nếu không bạn sẽ có một thanh cuộn đôi trong IE 7
Vì vậy, css chính xác sẽ là:

html {
  overflow-y: scroll;
}

— Ruben
nguồn

1

IE 10+ có một thanh cuộn nổi, vì vậy bạn nên tắt cái này cho các trình duyệt này

— Ruben

1

điều này có thể gây ra sự cố như thanh cuộn kép khi sử dụng kết hợp với phương thức bootbox và twitter bootstrap

— Ruben

Thông tin thêm: twitter bootstrap hiện thêm .modal-open cho bạn cơ thể khi một chế độ được mở

— Ruben

55

Đáng nói là cái này vĩnh viễn hiển thị một thanh cuộn dọc. Có thể không phải lúc nào cũng được chấp nhận.

— rustyx

Tôi nhận được một thanh cuộn đôi trong cả Chromium và Firefox. Tôi đang sử dụng hộp flex; có lẽ điều đó đang gây ra điều này ...

— Garrett

72

Gói nội dung của phần tử có thể cuộn của bạn vào một div và áp dụng 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>

Thủ thuật là 100vwđại diện cho 100% chế độ xem bao gồm thanh cuộn. Nếu bạn trừ đi 100%, đó là không gian có sẵn mà không có thanh cuộn, bạn sẽ kết thúc với chiều rộng của thanh cuộn hoặc 0nếu nó không có. Tạo một phần đệm có chiều rộng đó ở bên trái sẽ mô phỏng một thanh cuộn thứ hai, chuyển nội dung trung tâm trở lại bên phải.

Xin lưu ý rằng điều này sẽ chỉ hoạt động nếu phần tử có thể cuộn sử dụng toàn bộ chiều rộng của trang, nhưng điều này sẽ không có vấn đề gì vì hầu như chỉ có một vài trường hợp khác mà bạn có nội dung có thể cuộn ở giữa.

— Rapti
nguồn

1

Sẽ được áp dụng tốt hơn thông qua một lớp so với kiểu nội tuyến và sẽ chỉ hoạt động trong các trình duyệt này , nhưng đây là một kỹ thuật thông minh - Tôi đã nhận ra điều đó 100vwvà 100%đo lường những thứ khác nhau, vì vậy tôi đã học được điều gì đó hữu ích từ điều này!

— Nick F

21

Đây là hoàn toàn thiên tài và thực sự là câu trả lời tốt nhất xem xét hỗ trợ trình duyệt cho calc là rất tốt.

— michael

1

Bạn có thể làm tương tự ngoại trừ thay vì thêm một lề ở bên trái, bạn thêm một lề âm ở bên phải (xem stackoverflow.com/a/39289453/6015444 ).

— Touniouk

2

Giải pháp này sẽ gây ra các vấn đề tương tự với màu nền như câu trả lời "width: calc (100vw - 34px);" nhưng ở phía bên trái

— Maciej Lew

1

Tôi muốn giới thiệu để thêm một số truy vấn phương tiện cho phong cách này- @media screen and (min-width: 800px) {...} . Trong trường hợp khi nội dung sẽ phù hợp với chiều rộng trang. Ví dụ: trên các độ phân giải nhỏ sẽ có khoảng cách không cần thiết, chuyển nội dung sang phải

— MarkosyanArtur

44

Tôi nghĩ là không. Nhưng tạo kiểu bodyvới overflow: scrollnên làm. Bạn dường như biết điều đó, mặc dù.

— Michael Krelin - tin tặc
nguồn

3

Âm thanh tốt ... buộc trang luôn hiển thị thanh cuộn cho dù nó có cần hay không, ... sau đó không có thay đổi trực quan giữa các loại trang.

— eidylon

1

Có, nhưng IIRC, cái này hiển thị cả hai thanh cuộn. Tôi không thực sự cần cái ngang.

— Dmitri Nesteruk

Đúng. Nhưng không có nhiều tôi có thể làm gì để giúp bạn :( Thực ra, tôi chỉ xem xét các câu đầu tiên của bài trả lời của tôi là thực câu trả lời mà giao dịch với các câu hỏi.

— Michael Krelin - tin tặc

49

overflow-y: scroll:)

— Svish

2

Sau đây là câu trả lời tốt hơn

— Sami

36

Với cuộn luôn được hiển thị, có thể không tốt cho bố cục.

Cố gắng giới hạn chiều rộng cơ thể với css3

body {
    width: calc(100vw - 34px);
}

vwlà chiều rộng của chế độ xem (xem liên kết này để biết một số giải thích)
calctính toán trong css3
34pxlà viết tắt của chiều rộng thanh cuộn đôi (xem phần này để cố định hoặc điều này để tính nếu bạn không tin tưởng kích thước cố định)

— Moesio
nguồn

4

Mọi thứ đều vô ích cho đến khi ai đó cần.

— Moesio

3

Điều này trực quan ít xâm phạm hơn nhiều so với việc chỉ buộc các scollbar như câu trả lời được chấp nhận mô tả.

— Silas Hansen

4

Điều này đã làm việc tốt nhất cho nhu cầu của tôi cho đến nay, tôi cũng đã thêm vào padding-left: 34px;trung tâm trang của tôi.

— Pat Migliaccio

3

Đây phải là câu trả lời được chấp nhận, không giống như câu trả lời hiện đang được chấp nhận, nó thực sự đang trả lời câu hỏi!

— Coz

2

Điều này sẽ gây ra sự cố nếu bạn có thanh điều hướng / tiêu đề với màu khác với nền cơ thể hoặc viền dưới, v.v.

— Zia Ul Rehman Mughal

28

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

Ví dụ . Nhấp vào nút "thay đổi chiều cao tối thiểu".

Với calc(100vw - 100%)chúng ta có thể tính chiều rộng của thanh cuộn (và nếu nó không được hiển thị, nó sẽ là 0). Ý tưởng: sử dụng lề phải, chúng ta có thể tăng chiều rộng của <html>chiều rộng này. Bạn sẽ thấy một thanh cuộn ngang - nó sẽ được ẩn bằng cách sử dụng overflow-x: hidden.

— pongo
nguồn

Tôi đã phải đặt cơ thể vào một div và áp dụng lề cho div để nó hoạt động (tương tự như câu trả lời của Rapti .) Nhưng điều này có vẻ gọn gàng hơn nhiều.

— Touniouk

1

Điều này hoạt động rất tốt và dường như không dẫn đến các thanh cuộn ngang không mong muốn trong Chrome hoặc Firefox. Tại sao không chỉ sử dụng calc(100% - 100vw)thay vì nhân lên -1?

— SystemParadox

13

Tôi không biết đây có phải là một bài viết cũ không, nhưng tôi cũng gặp vấn đề tương tự và nếu bạn muốn cuộn theo chiều dọc, bạn chỉ nên thử overflow-y:scroll

13

Nếu thay đổi kích thước hoặc sau khi tải một số dữ liệu, đó là thêm thanh cuộn thì bạn có thể thử làm theo, tạo lớp và áp dụng lớp này.

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}

— kunalkamble
nguồn

3

Tôi đã giải quyết vấn đề trên một trong các trang web của mình bằng cách đặt rõ ràng độ rộng của phần thân trong javascript theo kích thước khung nhìn trừ đi chiều rộng của thanh cuộn. Tôi sử dụng một hàm dựa trên jQuery được ghi lại ở đây để xác định độ rộng của thanh cuộn.

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

— Frank L
nguồn

10

Tôi thậm chí không thể bắt đầu giải thích tại sao điều này là thực hành tồi tệ như vậy.

— huyền thoại

20

@BenHooper: Tôi muốn biết lý do tại sao điều này là thực hành xấu.

— Saad

1

Điều gì xảy ra nếu bạn thay đổi kích thước cửa sổ?

— Braden Steffaniak

3

Mở rộng câu trả lời bằng cách này:

body {
    width: calc(100vw - 17px);
}

Một người bình luận đề nghị thêm phần đệm trái để duy trì định tâm:

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

Nhưng sau đó mọi thứ sẽ không chính xác nếu nội dung của bạn rộng hơn chế độ xem. Để khắc phục điều đó, bạn có thể sử dụng các truy vấn phương tiện, như thế này:

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

Trong đó 1058px = chiều rộng nội dung + 17 * 2

Điều này cho phép thanh cuộn ngang xử lý tràn x và giữ nội dung được căn giữa ở giữa khi chế độ xem đủ rộng để chứa nội dung có chiều rộng cố định của bạn

— Greg St.Onge
nguồn

3

Mở rộng câu trả lời của Rapti , điều này cũng sẽ hoạt động tốt, nhưng nó sẽ thêm phần lề vào bên phải bodyvà che giấu nó bằng htmllề âm , thay vì thêm phần đệm có thể ảnh hưởng đến bố cục của trang. Bằng cách này, không có gì thay đổi trên trang thực tế (trong hầu hết các trường hợp) và mã vẫn hoạt động.

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}

— Cấp Gryczan
nguồn

Tôi thấy rằng trên chrome, điều này thêm một cuộn ngang trên các trang có thanh cuộn dọc trên trang web bootstrap của tôi.

— Gừng sóc

Bạn đã thử tìm hiểu tại sao? Kiểm tra trình kiểm tra phần tử và xem liệu Bootstrap có gây rối với lề, thanh cuộn hoặc bất cứ thứ gì tương tự không.

— Grant Gryczan

1

Có lẽ đó là một cái gì đó để làm với lề 15px mà bootstrap đặt lên mọi thứ, khi kiểm tra trang, lề container nằm dưới thanh cuộn. Tôi đã áp dụng overflow-x: hiddenvà đã sửa nó.

— Gừng sóc

3

Giải pháp của kashandr đã làm việc cho tôi nhưng để ẩn thanh cuộn ngang tôi đã thêm một kiểu nữa cho cơ thể. Đây là giải pháp hoàn chỉnh:

CSS

<style>
/* prevent layout shifting and hide horizontal scroll */
html {
  width: 100vw;
}
body {
  overflow-x: hidden;
}
</style>

Mã não

$(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');
      }
    });
});

Giải pháp chỉ dành cho JS (khi phương thức thứ 2 được mở từ phương thức thứ 1):

/**
 * 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);
  }
});

— Hassan Tareq
nguồn

2

Tôi đã cố gắng khắc phục sự cố tương tự do .modal-openlớp bootstrap của twitter gây ra body. Giải pháp html {overflow-y: scroll}không giúp được gì. Một giải pháp có thể tôi tìm thấy là thêm {width: 100%; width: 100vw}vào htmlphần tử.

— kashandr
nguồn

1

hoặc thay đổi nó thành body {overflow-y: scroll}

— Ruben

1

Nhưng điều đó sẽ luôn hiển thị một thanh cuộn ngay cả khi không bắt buộc.

— Rapti

Bạn nên giải thích tại sao bạn thiết lập chiều rộng hai lần? html { width: 100vw; }làm việc cho tôi

— Hassan Tareq

Đối với tôi, nó thực sự tạo ra hai thanh cuộn

— rbansal

2

Tôi sử dụng để có vấn đề đó, nhưng cách đơn giản để khắc phục nó là đây (cách này hiệu quả với tôi):

trên loại tệp CSS:

body{overflow-y:scroll;}

đơn giản như vậy! :)

— Melvin Guerrero
nguồn

2

Các giải pháp được đăng bằng calc (100vw - 100%) đang đi đúng hướng, nhưng có một vấn đề với điều này: Bạn sẽ mãi mãi có một lề bên trái kích thước của thanh cuộn, ngay cả khi bạn thay đổi kích thước cửa sổ để nội dung lấp đầy toàn bộ khung nhìn.

Nếu bạn cố gắng giải quyết vấn đề này bằng truy vấn phương tiện, bạn sẽ có một khoảnh khắc chụp lúng túng vì lề sẽ không nhỏ dần khi bạn thay đổi kích thước cửa sổ.

Đây là một giải pháp khắc phục được điều đó và AFAIK không có nhược điểm:

Thay vì sử dụng lề: tự động để căn giữa nội dung của bạn, hãy sử dụng:

body {
margin-left: calc(50vw - 500px);
}

Thay thế 500px bằng một nửa chiều rộng tối đa của nội dung của bạn (vì vậy trong ví dụ này, chiều rộng tối đa của nội dung là 1000px). Bây giờ nội dung sẽ ở giữa và lề sẽ giảm dần cho đến khi nội dung lấp đầy khung nhìn.

Để ngăn lề không bị âm khi chế độ xem nhỏ hơn chiều rộng tối đa, chỉ cần thêm truy vấn phương tiện như sau:

@media screen and (max-width:1000px) {
    body {
        margin-left: 0;
    }
}

Et voilà!

— Jonathan SI
nguồn

2

Nếu chiều rộng của bảng sẽ không thay đổi, bạn có thể đặt chiều rộng của phần tử (chẳng hạn như tbody) có chứa thanh cuộn> 100% (cho phép thêm không gian cho thanh cuộn) và đặt overflow-y thành "overlay" (vì vậy rằng thanh cuộn vẫn cố định và sẽ không dịch chuyển bàn sang trái khi nó xuất hiện). Đồng thời đặt chiều cao cố định cho phần tử bằng thanh cuộn, vì vậy thanh cuộn sẽ xuất hiện khi vượt quá chiều cao. Thích như vậy:

tbody {
  height: 100px;
  overflow-y: overlay;
  width: 105%
}

Lưu ý: bạn sẽ phải điều chỉnh thủ công% chiều rộng vì% không gian mà thanh cuộn chiếm sẽ tương đối với chiều rộng bảng của bạn (nghĩa là: chiều rộng nhỏ hơn của bảng, yêu cầu nhiều hơn% để phù hợp với thanh cuộn, vì kích thước của pixel là không đổi )

Một ví dụ bảng động:

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>

Mở rộng đoạn trích

— Robert James Mieta
nguồn

1

Chỉ cần đặt chiều rộng của phần tử container của bạn như thế này sẽ thực hiện thủ thuật

width: 100vw;

Điều này sẽ làm cho phần tử đó bỏ qua thanh cuộn và nó hoạt động với màu nền hoặc hình ảnh.

— Barsonax
nguồn

-3

Tôi đã sử dụng một số jquery để giải quyết điều này

$('html').css({
    'overflow-y': 'hidden'
});

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});

— Will McMillian
nguồn

3

Bạn có thể nhận được phản hồi kém về câu trả lời của bạn vì giải pháp này yêu cầu toàn bộ khung JavaScript. "jQuery tất cả mọi thứ!"

— Paul Lammertsma

3

vâng, jQuery chắc chắn là con đường để đi - doxdesk.com/img/updates/20091116-so-large.gif

— Đồng nghĩa với

-4

@media screen and (min-width: 1024px){
    body {
    min-height: 700px
    }
}

— Vicky
nguồn

Chào mừng bạn đến với Stack Overflow! Mặc dù đoạn mã này có thể giải quyết câu hỏi, bao gồm một lời giải thích thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho độc giả trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn. Xin vui lòng cố gắng không làm đông mã của bạn với các bình luận giải thích, điều này làm giảm khả năng đọc của cả mã và các giải thích!

— Andrew Myers

-5

Trái với câu trả lời được chấp nhận cho thấy thanh cuộn cố định trên cửa sổ trình duyệt ngay cả khi nội dung không tràn ra màn hình , tôi thích sử dụng:

html{
  height:101%;
}

Điều này là do sự xuất hiện của thanh cuộn có ý nghĩa hơn nếu nội dung thực sự tràn ra .

Điều này có ý nghĩa hơn thế này .

— Nikunj Madooseaia
nguồn

1

Ít nhất câu cuối cùng là sai trong câu trả lời của bạn. Nó có ý nghĩa tương tự với trang trống thừa được in bằng máy in.

— vp_arth