CSS สามารถใช้ซ่อนแถบเลื่อนได้หรือไม่? คุณจะทำอย่างไร

ตั้งค่าoverflow: hidden;บนแท็กเนื้อหาเช่นนี้:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

รหัสด้านบนซ่อนทั้งแถบเลื่อนแนวนอนและแนวตั้ง

หากคุณต้องการซ่อนเฉพาะแถบเลื่อนแนวตั้งให้ใช้overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

และหากคุณต้องการซ่อนเฉพาะแถบเลื่อนแนวนอนให้ใช้overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

หมายเหตุ: มันจะปิดใช้งานคุณสมบัติการเลื่อนด้วย อ้างถึงคำตอบด้านล่างหากคุณต้องการซ่อนแถบเลื่อน แต่ไม่ใช่คุณสมบัติการเลื่อน

WebKit รองรับองค์ประกอบหลอกแถบเลื่อนที่สามารถซ่อนด้วยกฎ CSS มาตรฐาน:

#element::-webkit-scrollbar {
    display: none;
}

หากคุณต้องการซ่อนแถบเลื่อนทั้งหมดให้ใช้

::-webkit-scrollbar {
    display: none;
}

ฉันไม่แน่ใจเกี่ยวกับการกู้คืน - ทำงานได้ แต่อาจมีวิธีที่ถูกต้องในการทำเช่นนี้:

::-webkit-scrollbar {
    display: block;
}

แน่นอนว่าคุณสามารถใช้งานได้ตลอดเวลาwidth: 0ซึ่งสามารถเรียกคืนได้อย่างง่ายดายwidth: autoแต่ฉันไม่ได้เป็นแฟนของการเหยียดหยามwidthการปรับแต่งการมองเห็น

Firefox 64 ตอนนี้รองรับคุณสมบัติความกว้างของแถบเลื่อนโดยค่าเริ่มต้น (63 ต้องมีการตั้งค่าสถานะการกำหนดค่า) วิธีซ่อนแถบเลื่อนใน Firefox 64:

#element {
    scrollbar-width: none;
}

หากต้องการดูว่าเบราว์เซอร์ปัจจุบันของคุณรองรับองค์ประกอบปลอมหรือscrollbar-widthลองใช้ตัวอย่างนี้:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

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

ใช่ ..

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

อย่างไรก็ตามเป็นไปได้ที่จะป้องกันไม่ให้เบราว์เซอร์มีความต้องการในการสร้างและแสดงแถบเลื่อนหากคุณไม่อนุญาตให้หน้าเว็บของคุณล้น

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

สร้าง div โดยซ่อนโอเวอร์โฟลว์ไว้ ตรวจพบเมื่อผู้ใช้พยายามเลื่อน แต่ไม่สามารถทำได้เพราะเราได้ปิดการใช้งานความสามารถของเบราว์เซอร์ในการเลื่อนด้วยการล้น: ซ่อน .. และย้ายเนื้อหาขึ้นโดยใช้ JavaScript เมื่อเกิดเหตุการณ์นี้ขึ้น ดังนั้นการสร้างการเลื่อนของเราเองโดยไม่ต้องเบราว์เซอร์เริ่มต้นการเลื่อนหรือใช้ปลั๊กอินเช่นiScroll iScroll

---

เพื่อความสมบูรณ์; วิธีเฉพาะสำหรับผู้ขายทั้งหมดในการจัดการแถบเลื่อน:

Internet Explorer 5.5+

* คุณสมบัติเหล่านี้ไม่เคยเป็นส่วนหนึ่งของข้อมูลจำเพาะ CSS และไม่เคยได้รับการอนุมัติหรือนำหน้าผู้ขาย แต่ทำงานได้ใน Internet Explorer และ Konqueror สามารถตั้งค่าเหล่านี้แบบโลคัลในสไตล์ชีตผู้ใช้สำหรับแต่ละแอปพลิเคชัน ใน Internet Explorer คุณจะพบได้ในแท็บ "การเข้าถึง" ใน Konqueror ภายใต้แท็บ "สไตล์ชีต"

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

ในฐานะของ Internet Explorer 8 คุณสมบัติเหล่านี้ถูกผู้ขายนำหน้าโดย Microsoft แต่พวกเขาก็ยังคงไม่ได้รับการอนุมัติโดยW3C

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

รายละเอียดเพิ่มเติมเกี่ยวกับ Internet Explorer

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

ด้วย Microsoft Internet Explorer 6 และใหม่กว่าเมื่อคุณใช้การ!DOCTYPEประกาศเพื่อระบุโหมดที่เป็นไปตามมาตรฐานแอตทริบิวต์นี้ใช้กับองค์ประกอบ HTML เมื่อโหมดมาตรฐานไม่ได้ระบุเช่นเดียวกับรุ่นก่อนหน้านี้ Internet Explorer แอตทริบิวต์นี้นำไปใช้กับBODYองค์ประกอบไม่HTMLองค์ประกอบ

นอกจากนี้ยังเป็นที่น่าสังเกตว่าเมื่อทำงานกับ. NET คลาส ScrollBar System.Windows.Controls.Primitivesในเฟรมเวิร์กการนำเสนอมีหน้าที่ในการแสดงแถบเลื่อน

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN คุณสมบัติ UI พื้นฐาน
• W3C เกี่ยวกับคุณสมบัติแถบเลื่อนที่ไม่ได้มาตรฐาน
• MSDN .NET ScrollBar Class

WebKit

ส่วนขยาย WebKit ที่เกี่ยวข้องกับการปรับแต่งแถบเลื่อนคือ:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

สิ่งเหล่านี้สามารถนำมารวมกับตัวเลือกหลอกเพิ่มเติม:

• :horizontal - คลาสหลอกแนวนอนใช้กับชิ้นส่วนแถบเลื่อนใด ๆ ที่มีการวางแนวนอน
• :vertical - คลาสหลอกแนวตั้งใช้กับชิ้นส่วนแถบเลื่อนใด ๆ ที่มีการวางแนวตั้ง
• :decrement- การลดระดับหลอกใช้กับปุ่มและชิ้นส่วนแทร็ก มันบ่งบอกว่าปุ่มหรือชิ้นส่วนแทร็กจะลดตำแหน่งของมุมมองเมื่อใช้หรือไม่ (เช่นบนแถบเลื่อนแนวตั้งขึ้นบนแถบเลื่อนแนวนอน)
• :increment- คลาสหลอกที่เพิ่มขึ้นนำไปใช้กับปุ่มและชิ้นส่วนแทร็ก มันบ่งบอกว่าปุ่มหรือชิ้นส่วนแทร็คจะเพิ่มตำแหน่งมุมมองเมื่อใช้หรือไม่ (เช่นบนแถบเลื่อนแนวตั้งลงบนแถบเลื่อนแนวนอนหรือไม่)
• :start- คลาสหลอกเริ่มใช้กับปุ่มและแทร็กชิ้นส่วน มันบ่งชี้ว่าวัตถุถูกวางไว้ก่อนที่นิ้วหัวแม่มือ
• :end- คลาสหลอกใช้กับปุ่มและชิ้นส่วนแทร็ก มันบ่งชี้ว่าวัตถุที่ถูกวางไว้หลังจากนิ้วหัวแม่มือ
• :double-button- คลาสคู่หลอกใช้กับปุ่มและชิ้นส่วนแทร็ก มันถูกใช้เพื่อตรวจสอบว่าปุ่มเป็นส่วนหนึ่งของคู่ของปุ่มที่อยู่ด้วยกันที่ปลายด้านเดียวกันของแถบเลื่อนหรือไม่ สำหรับชิ้นส่วนของแทร็กมันบ่งบอกว่าชิ้นส่วนของแทร็คติดกับปุ่มคู่หนึ่งหรือไม่
• :single-button- คลาสหลอกแบบใช้ปุ่มเดียวใช้กับปุ่มและชิ้นส่วนแทร็ก มันถูกใช้เพื่อตรวจสอบว่าปุ่มเป็นของตัวเองในตอนท้ายของแถบเลื่อน สำหรับชิ้นส่วนของแทร็กมันบ่งบอกว่าชิ้นส่วนของแทร็กติดกับปุ่มซิงเกิล
• :no-button - ใช้กับชิ้นส่วนของแทร็กและระบุว่าชิ้นส่วนของแทร็คนั้นวิ่งไปที่ขอบของแถบเลื่อนหรือไม่นั่นคือไม่มีปุ่มที่ส่วนท้ายของแทร็กนั้น
• :corner-present - ใช้กับชิ้นส่วนแถบเลื่อนทั้งหมดและระบุว่ามีมุมแถบเลื่อนอยู่หรือไม่
• :window-inactive- ใช้กับแถบเลื่อนทั้งหมดและระบุว่าหน้าต่างที่มีแถบเลื่อนนั้นเปิดใช้งานอยู่หรือไม่ (ใน nightlies ล่าสุดเมื่อเร็ว ๆ นี้คลาส pseudo นี้จะใช้กับ :: selection เช่นกันเราวางแผนที่จะขยายให้ทำงานร่วมกับเนื้อหาใด ๆ และเพื่อเสนอเป็นคลาส pseudo มาตรฐานใหม่)

ตัวอย่างของการรวมกันเหล่านี้

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• แถบเลื่อนแต่งสไตล์ - Webkit.org

รายละเอียดเพิ่มเติมเกี่ยวกับ Chrome

addWindowScrollHandler สาธารณะคง HandlerRegistration addWindowScrollHandler (Window.ScrollHandler จัดการ)

  เพิ่มพารามิเตอร์ตัวจัดการ Window.ScrollEvent: ตัวจัดการ - ตัวจัดการส่งคืน: ส่งคืนการลงทะเบียนตัวจัดการ [ แหล่งที่มา ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla

Mozilla มีส่วนขยายบางส่วนสำหรับจัดการกับแถบเลื่อน แต่ไม่แนะนำให้ใช้ทั้งหมด

• -moz-scrollbars-none พวกเขาแนะนำให้ใช้โอเวอร์โฟลว์: ซ่อนไว้แทนที่สิ่งนี้
• -moz-scrollbars-horizontal คล้ายกับ overflow-x
• -moz-scrollbars-vertical คล้ายกับ overflow-y

• -moz-hidden-unscrollableทำงานภายในได้ภายในการตั้งค่าโปรไฟล์ผู้ใช้ ปิดใช้งานการเลื่อนองค์ประกอบ XML รูทและปิดใช้งานโดยใช้ปุ่มลูกศรและล้อเลื่อนของเมาส์เพื่อเลื่อนหน้าเว็บ

• Mozilla Developer Docs ใน 'ล้น'

รายละเอียดเพิ่มเติมเกี่ยวกับ Mozilla

สิ่งนี้ไม่มีประโยชน์จริงๆเท่าที่ฉันรู้ แต่มันก็คุ้มค่าที่จะสังเกตว่าคุณลักษณะที่ควบคุมว่าจะแสดงแถบเลื่อนหรือไม่ใน Firefox คือ ( ลิงค์อ้างอิง ):

• คุณสมบัติ:        แถบเลื่อน
• ประเภท:               nsIDOMBarProp
• คำอธิบาย:   วัตถุที่ควบคุมว่าจะแสดงแถบเลื่อนหรือไม่ในหน้าต่าง คุณลักษณะนี้เป็น "แทนที่" ใน JavaScript อ่านเท่านั้น

สุดท้าย แต่ไม่ท้ายสุดการขยายเป็นเหมือนเวทมนต์

ดังที่ได้กล่าวไว้ก่อนหน้านี้ในคำตอบอื่น ๆ นี่คือตัวอย่างที่อธิบายตนเองได้อย่างเพียงพอ

บทเรียนประวัติศาสตร์

เพียงเพราะฉันอยากรู้อยากเห็นฉันต้องการเรียนรู้เกี่ยวกับต้นกำเนิดของแถบเลื่อนและสิ่งเหล่านี้เป็นข้อมูลอ้างอิงที่ดีที่สุดที่ฉันพบ

• 10 สิ่งประดิษฐ์ในการเลื่อนและแถบเลื่อน
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

เบ็ดเตล็ด

ในสเปค HTML5 ร่างที่seamlessแอตทริบิวต์ถูกกำหนดเพื่อป้องกันไม่ให้เลื่อนแถบปรากฏใน iFrames เพื่อที่ว่าพวกเขาอาจจะผสมกับเนื้อหาที่ล้อมรอบบนหน้าเว็บ แม้ว่าองค์ประกอบนี้จะไม่ปรากฏในการแก้ไขล่าสุด

scrollbarวัตถุ BarProp เป็นเด็กที่windowวัตถุและหมายถึงองค์ประกอบของส่วนติดต่อผู้ใช้ที่มีกลไกการเลื่อนหรือบางแนวคิดอินเตอร์เฟซที่คล้ายกัน window.scrollbars.visibleจะกลับมาtrueหากมองเห็นแถบเลื่อน

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

History API ยังมีคุณสมบัติสำหรับการเรียกคืนการเลื่อนในการนำทางหน้าเพื่อคงตำแหน่งการเลื่อนในการโหลดหน้า

window.history.scrollRestoration สามารถใช้เพื่อตรวจสอบสถานะของการเลื่อนหรือเปลี่ยนสถานะของมัน (ต่อท้าย ="auto"/"manual"อัตโนมัติเป็นค่าเริ่มต้นการเปลี่ยนเป็นคู่มือหมายความว่าคุณในฐานะนักพัฒนาจะเป็นเจ้าของการเปลี่ยนแปลงการเลื่อนใด ๆ ที่อาจจำเป็นเมื่อผู้ใช้สำรวจประวัติของแอพ หากคุณต้องการคุณสามารถติดตามตำแหน่งการเลื่อนในขณะที่คุณกดรายการประวัติด้วย history.pushState ()

---

อ่านเพิ่มเติม:

• เลื่อนบนวิกิพีเดีย
• แถบเลื่อน (Windows)
• วิธีการเลื่อน
• วิธีการเลื่อน - Microsoft Dev Network
• iScroll บน Github (อ้างอิงในส่วนแรกด้านบน)
• การเลื่อนและการเลื่อนบทความเกี่ยวกับการใช้งานโดย Jakob Nielsen

ตัวอย่าง

• แผงการเลื่อนแบบอิสระที่ไม่มีการเลื่อนร่างกาย (ใช้เพียง CSS) - Ben Frain (10-21-2014)

คุณสามารถทำได้ด้วยเสื้อคลุมdivที่มีการล้นของที่ซ่อนอยู่และภายในชุดdivauto

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

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

สิ่งนี้ใช้ได้กับฉันด้วยคุณสมบัติ CSS อย่างง่าย:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

สำหรับ Firefox เวอร์ชันเก่าให้ใช้: overflow: -moz-scrollbars-none;

นี่คือทางออกของฉันซึ่งในทางทฤษฎีครอบคลุมเบราว์เซอร์ที่ทันสมัยทั้งหมด:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html สามารถถูกแทนที่ด้วยองค์ประกอบใด ๆ ที่คุณต้องการซ่อนแถบเลื่อน

_{หมายเหตุ : ฉันได้อ่านคำตอบอีก 19 ข้อเพื่อดูว่ารหัสที่ฉันโพสต์ได้รับการคุ้มครองแล้วหรือไม่และดูเหมือนว่าไม่มีคำตอบเดียวที่จะสรุปสถานการณ์ดังกล่าวในปี 2019 แม้ว่าจะมีรายละเอียดมากมาย ขอโทษถ้าคนอื่นพูดเรื่องนี้และฉันก็พลาดไป}

ฉันคิดว่าฉันพบวิธีแก้ปัญหาสำหรับพวกคุณถ้าคุณยังสนใจ นี่เป็นสัปดาห์แรกของฉัน แต่มันใช้ได้สำหรับฉัน ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

หากคุณกำลังมองหาวิธีการซ่อนแถบเลื่อนสำหรับอุปกรณ์มือถือให้ทำตามคำตอบของปีเตอร์ !

นี่คือjsfiddleซึ่งใช้วิธีแก้ปัญหาด้านล่างเพื่อซ่อนแถบเลื่อนแนวนอน

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

ได้รับการทดสอบบนแท็บเล็ต Samsung กับ Android 4.0.4 (Ice Cream Sandwich ทั้งในเบราว์เซอร์ดั้งเดิมและ Chrome) และบน iPad ที่มี iOS 6 (ทั้งใน Safari และ Chrome)

ใช้คุณสมบัติCSSoverflow :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

นี่คือตัวอย่างเพิ่มเติม:

• overflow-x, การทดสอบ overflow-y
• คุณสมบัติ CSS Overflow

ในฐานะที่เป็นคนอื่นแล้วกล่าวว่าการใช้ overflowCSS

แต่ถ้าคุณยังต้องการให้ผู้ใช้สามารถเลื่อนเนื้อหานั้น (โดยไม่แสดงแถบเลื่อน) คุณต้องใช้ JavaScript

ตอบคำถามของฉันที่นี่เพื่อหาวิธีแก้ไข: ซ่อนแถบเลื่อนในขณะที่ยังสามารถเลื่อนด้วยเมาส์ / แป้นพิมพ์

นอกจากคำตอบของปีเตอร์:

#element::-webkit-scrollbar {
    display: none;
}

สิ่งนี้จะทำงานเหมือนกันสำหรับ Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

วิธีการข้ามเบราว์เซอร์เพื่อซ่อนแถบเลื่อน

มีการทดสอบกับ Edge, Chrome, Firefox และ Safari

ซ่อนแถบเลื่อนในขณะที่ยังสามารถเลื่อนด้วยล้อเลื่อนของเมาส์ได้!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

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

ในการซ่อนแถบเลื่อนเทคนิคโดย John Kurlakทำงานได้ดียกเว้นการปล่อยให้ผู้ใช้ Firefox ที่ไม่มีทัชแพดไม่มีวิธีเลื่อนจนกว่าพวกเขาจะมีเมาส์ที่มีล้อซึ่งอาจทำ แต่ถึงกระนั้นพวกเขาก็สามารถเลื่อนแนวตั้งได้ตามปกติ .

เทคนิคของ John ใช้สามองค์ประกอบ:

• องค์ประกอบด้านนอกเพื่อปกปิดแถบเลื่อน
• องค์ประกอบกลางที่จะมีแถบเลื่อน
• และองค์ประกอบเนื้อหาเพื่อกำหนดขนาดขององค์ประกอบกลางและทำให้มันมีแถบเลื่อน

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

ความกังวลที่ใหญ่ที่สุดของฉันคือว่าเบราว์เซอร์ทุกรุ่นตั้งแถบเลื่อนเพื่อให้มองเห็นเนื้อหาที่ล้นปรากฏ ฉันได้ทดสอบในเบราว์เซอร์ปัจจุบัน แต่ไม่ใช่เบราว์เซอร์ที่เก่ากว่า

ให้อภัยSASSของฉัน;

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

การทดสอบ

OS X คือ 10.6.8 Windows คือ Windows 7

• ซ่อนแถบเลื่อน Firefox 32.0 ปุ่มลูกศรไม่เลื่อนแม้หลังจากคลิกเพื่อโฟกัส แต่ล้อเมาส์และสองนิ้วบนแทร็กแพดทำ OS X และ Windows
• ซ่อนแถบเลื่อน Chrome 37.0 ปุ่มลูกศรทำงานหลังจากคลิกเพื่อโฟกัส ล้อเมาส์และแทร็กแพดทำงาน OS X และ Windows
• ซ่อนแถบเลื่อนของ Internet Explorer 11 ปุ่มลูกศรทำงานหลังจากคลิกเพื่อโฟกัส ล้อเมาส์ทำงาน ของ windows
• Safari 5.1.10 ซ่อนแถบเลื่อน ปุ่มลูกศรทำงานหลังจากคลิกเพื่อโฟกัส ล้อเมาส์และแทร็กแพดทำงาน OS X
• Android 4.4.4 และ 4.1.2 ซ่อนแถบเลื่อน สัมผัสการเลื่อนงาน พยายามใน Chrome 37.0, Firefox 32.0 และ HTMLViewer บน 4.4.4 (ไม่ว่าจะเป็นอะไร) ใน HTMLViewer หน้าคือขนาดของเนื้อหาที่ถูกปิดบังและสามารถเลื่อนได้เช่นกัน! การเลื่อนมีผลตอบรับที่ยอมรับได้กับการซูมหน้า

ฉันแค่คิดว่าฉันจะชี้ให้คนอื่นที่อ่านคำถามนี้ว่าการตั้งค่าoverflow: hidden(หรือล้น) บนbodyองค์ประกอบนั้นไม่ได้ซ่อนแถบเลื่อนสำหรับฉัน

ฉันต้องใช้htmlองค์ประกอบ

ฉันเขียนเวอร์ชัน WebKit ด้วยตัวเลือกบางตัวเช่นซ่อนอัตโนมัติ , รุ่นเล็ก , เลื่อนอย่างเดียว -y , หรือonly-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

คัดลอกรหัส CSS นี้ไปยังรหัสลูกค้าเพื่อซ่อนแถบเลื่อน:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>

HTML ของฉันเป็นแบบนี้:

<div class="container">
  <div class="content">
  </div>
</div>

เพิ่มไปยังdivตำแหน่งที่คุณต้องการซ่อนแถบเลื่อน:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

และเพิ่มไปยังคอนเทนเนอร์

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

overflow-y:hidden;ปิดการใช้งานแถบเลื่อนแนวตั้งเพียงแค่เพิ่ม

หาข้อมูลเพิ่มเติมเกี่ยวกับมันล้น

คำตอบของฉันจะเลื่อนแม้เมื่อoverflow:hidden;ใช้ jQuery:

ตัวอย่างเช่นเลื่อนตามแนวนอนด้วยล้อเลื่อนของเมาส์:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

ฉันเชื่อว่าคุณสามารถจัดการได้ด้วยoverflowคุณสมบัติ CSS แต่มีการสนับสนุนเบราว์เซอร์ที่ จำกัด แหล่งข่าวคนหนึ่งกล่าวว่าเป็น Internet Explorer 5 (และใหม่กว่า), Firefox 1.5 (และใหม่กว่า) และ Safari 3 (และใหม่กว่า) - อาจเพียงพอสำหรับวัตถุประสงค์ของคุณ

การเลื่อนการเลื่อนการเลื่อนมีการสนทนาที่ดี

ฉันลองทุกอย่างและสิ่งที่ดีที่สุดสำหรับวิธีแก้ปัญหาของฉันคือแสดงแถบเลื่อนแนวตั้งเสมอจากนั้นเพิ่มระยะขอบติดลบเพื่อซ่อน

body {
  overflow-y: scroll;
  margin-right: -20px;
}