Tại sao scrollWidth chỉ bao gồm phần đệm trái?

Question

Vì vậy, tôi có DIV #Wrapper có chiều rộng cố định. Bên trong DIV đó, tôi có một DIV #Panel mà cũng có chiều rộng cố định:

<div id="Wrapper"> 
    <p>...</p> 
    <div id="Panel">Panel</div> 
    <p>...</p> 
</div> 

Đôi khi, chiều rộng của Panel là lớn hơn so với với các Wrapper, và trong những trường hợp tôi muốn mở rộng Wrapper thông qua JavaScript, để nó kết thúc tốt đẹp Bảng điều khiển.

Live Demo:http://jsfiddle.net/H6rML/

tôi dự định sử dụng .scrollWidth trên Wrapper để xác định độ rộng của Panel. Tuy nhiên, vấn đề là Wrapper có đệm ngang, và .scrollWidth vì một số lý do chỉ bao gồm phần đệm bên trái của trình bao bọc. Vì vậy:

Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width 

Vì vậy, đưa ra:

#Wrapper { 
    width: 200px; 
    padding: 10px;   
} 

#Panel { 
    width: 300px; 
} 

Wrapper.scrollWidth lợi nhuận 310px, mà không phải là rất hữu ích. Nếu .scrollWidth không bao gồm bất kỳ phần đệm nào và chỉ trả lại chiều rộng của Bảng điều khiển, tôi có thể làm việc với điều đó (tôi sẽ thêm phần đệm theo cách thủ công vào giá trị đó). Nếu cả hai paddings được bao gồm, tôi có thể làm việc với điều đó quá. Nhưng tại sao chỉ có padding bên trái? (Btw hành vi này dường như là qua trình duyệt.)

Một vài lưu ý thêm:

1. tôi không thể thiết lập chiều rộng trên Wrapper trực tiếp. Trong mã thực tế của tôi, tôi đặt chiều rộng trên một phần tử tổ tiên là một số cấp trên Wrapper, và tôi sử dụng một API tùy chỉnh để thiết lập chiều rộng. Đây là lý do tại sao tôi cần lấy giá trịđầy đủ.

2. Tôi muốn một giải pháp không phụ thuộc vào nội dung của Trình bao bọc. Trong demo của tôi nó là một Panel, nhưng trong các kịch bản khác có thể có một yếu tố khác nhau mà tràn, hoặc thậm chí nhiều yếu tố. Đó là lý do tại sao tôi đã đi với .scrollWidth trên Wrapper.

Có cách nào để lấy giá trị 320px mà không cần phải tự thêm các đệm đúng với giá trị .scrollWidth?

---

Btw, theo tiêu chuẩn, các padding đúng nên được bao gồm:

Thuộc tính scrollWidth phải trả lại kết quả của việc chạy các bước sau:

1. Nếu phần tử không có bất kỳ hộp bố cục CSS được liên kết nào trả về số không và chấm dứt các bước này.

2. Nếu phần tử là phần tử gốc và Tài liệu không ở chế độ quirks trả về tối đa (chiều rộng nội dung tài liệu, giá trị của innerWidth).

3. Nếu phần tử là phần tử nội dung HTML và Tài liệu ở chế độ quirks trả về tối đa (chiều rộng nội dung tài liệu, giá trị của innerWidth).

4. Trả lại giá trị được tính của thuộc tính 'padding-left', cộng với giá trị được tính toán của 'padding-right', cộng với chiều rộng nội dung của phần tử.

Nguồn: http://www.w3.org/TR/cssom-view/

Tại sao không phải là trình duyệt cư xử cho phù hợp?

---

Để nâng cao hơn nữa rõ ràng của bài viết của tôi, hãy để tôi tổng hợp hai câu hỏi chính:

(1) Nếu các quốc gia tiêu chuẩn mà các padding đúng nên được tính vào giá trị .scrollWidth, thì tại sao sao các trình duyệt không hoạt động?

(2) Có thể truy lục giá trị chính xác (320px trong trường hợp của tôi) mà không phải thêm thủ công đệm đúng không?

---

Câu hỏi này đã được trả lời trong một chủ đề

Câu trả lời cho câu hỏi này nằm ở đây: When a child element overflows horizontally, why is the right padding of the parent ignored?

Answer 1

Hãy thử điều này:

#Wrapper { 
    min-width: 200px; 
    padding: 10px; 
    float: left; 
} 

hoặc sử dụng jQuery

$(document).ready(function() { 
    var width = jQuery("#Panel").width(); 
    $("#Wrapper").width(width); 
}); 

Answer 2

Bạn có thể sử dụng jQuery để làm điều này:

$(function() { 
    $("#Wrapper").width($("#Panel").outerWidth()); 
}); 

này sẽ đưa vào tài khoản #Panel 's đệm, lề vv

Answer 3

Tôi không chắc chắn nếu tôi hiểu đúng, nhưng từ những gì tôi đọc, tôi giả sử bạn muốn thay đổi chiều rộng của #Wrapper dựa trên #Panel. Trong trường hợp đó, có lẽ bạn có thể thử như sau:

#Wrapper { 
    display: inline-block; 
    make sure to remove width from #Wrapper 
} 

Answer 4

Tôi không có ý tưởng tại sao các trình duyệt hàng đầu chia sẻ lỗi này cho đến ngày hôm nay, nhưng đây là một bản demo của vấn đề và inline-block workaround.

document.body.innerHTML += 'one.scrollWidth = '+ document.querySelector('.one').scrollWidth 
 
          +'<br>two.scrollWidth = '+ document.querySelector('.two').scrollWidth 
 
          +'<br>three.scrollWidth = '+ document.querySelector('.three').scrollWidth 
 
          +'&nbsp;&nbsp;&nbsp;(fix applied to grand children)<br>four.scrollWidth = '+ document.querySelector('.four').scrollWidth +'&nbsp;&nbsp;&nbsp;(fix applied to direct child)';

.parent{ 
 
    border:1px solid rgba(50,150,220,1); 
 
} 
 
.child{ 
 
    background:rgba(100,200,255,0.3); 
 
    padding:10px 20px; 
 
    white-space:nowrap; 
 
} 
 
.scroll-container{ 
 
    border:1px solid red; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
} 
 
.two, .three, .four{ 
 
    width:60px; 
 
} 
 
.three .child{ 
 
    display:inline-block; 
 
} 
 
.four .parent{ 
 
    display:inline-block; 
 
}

<div class="scroll-container one"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="scroll-container two"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="scroll-container three"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="scroll-container four"> 
 
    <div class="parent"> 
 
    <div class="child">Lorem ipsum dolor</div> 
 
    <div class="child">Lorem ipsum dolor sit amet</div> 
 
    </div> 
 
</div> 
 
<br>