CSS ซ่อนแถบเลื่อนหากไม่จำเป็น

ฉันพยายามหาวิธีซ่อนตัวoverflow-y:scroll;ถ้าไม่ต้องการ สิ่งที่ฉันหมายถึงคือฉันกำลังสร้างเว็บไซต์และฉันมีพื้นที่หลักที่โพสต์จะปรากฏขึ้นและฉันต้องการซ่อนแถบเลื่อนหากเนื้อหาไม่เกินความกว้างปัจจุบัน

นอกจากนี้คำถามที่สองของฉัน ฉันต้องการให้เป็นเช่นนั้นเมื่อโพสต์เกินความกว้างปัจจุบันความกว้างจะเพิ่มขึ้นโดยอัตโนมัติและเนื้อหาจะไม่ออกนอกกรอบ

ใครบ้างมีเงื่อนงำวิธีการทำเช่นนี้?

พื้นที่โพสต์:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

คอนเทนเนอร์ของเว็บไซต์หลัก:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

ตั้งค่าoverflow-yคุณสมบัติเป็นautoหรือลบคุณสมบัติรวมกันหากไม่ได้รับมรดก

คุณสามารถใช้ได้ overflow:auto;

นอกจากนี้คุณยังสามารถควบคุมแกน x หรือ y ทีละอันด้วยคุณสมบัติoverflow-xและoverflow-y

ตัวอย่าง:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

คุณสามารถใช้ทั้ง. content และ. container เพื่อโอเวอร์โฟลว์: auto หมายความว่าถ้าข้อความเกินกว่าการเลื่อนโดยอัตโนมัติจะมาเป็นแกน x และแกน y (ไม่จำเป็นต้องให้แกน x แยกและแกน y ปกติให้ล้น: อัตโนมัติ)

.content {ล้น: อัตโนมัติ;}

.selected-elementClass{
    overflow-y:auto;
}

.container {ล้น: auto;} จะทำการหลอกลวง หากคุณต้องการควบคุมทิศทางเฉพาะคุณควรตั้งค่าอัตโนมัติสำหรับแกนนั้น AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

โค้ดด้านบนจะซ่อนโอเวอร์โฟลว์ใด ๆ ในแกน x และสร้างแถบเลื่อนเมื่อจำเป็นบนแกน y แต่คุณต้องแน่ใจว่าเนื้อหาเริ่มต้นของคุณมีความสูงน้อยกว่าความสูงของคอนเทนเนอร์ ถ้าไม่แถบเลื่อนจะไม่ถูกซ่อน