การป้องกันไม่ให้แถบเลื่อนถูกซ่อนไว้สำหรับผู้ใช้แทร็คแพดของ MacOS ใน WebKit / Blink

พฤติกรรมเริ่มต้นของ WebKit / Blink (Safari / Chrome) บน MacOS ตั้งแต่ 10.7 (Mac OS X Lion) คือการซ่อนแถบเลื่อนจากผู้ใช้ trackpad เมื่อไม่ได้ใช้งาน นี้อาจจะทำให้เกิดความสับสน ; แถบเลื่อนมักเป็นเพียงคิวภาพที่องค์ประกอบเลื่อนได้

ตัวอย่าง ( jsfiddle )

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

ฉันจะบังคับให้แถบเลื่อนแสดงบนองค์ประกอบที่เลื่อนได้ใน WebKit ได้อย่างไร

การปรากฏตัวของแถบเลื่อนสามารถควบคุมได้ด้วยของ WebKit -webkit-scrollbarหลอกองค์ประกอบ  ^{[ บล็อก} ] คุณสามารถปิดการใช้งานลักษณะเริ่มต้นและพฤติกรรมโดยการตั้งค่า-webkit-appearance ^{[ เอกสาร ]}noneไป

เนื่องจากคุณกำลังลบสไตล์เริ่มต้นคุณจะต้องระบุสไตล์ด้วยตนเองไม่เช่นนั้นแถบเลื่อนจะไม่ปรากฏขึ้น CSS ต่อไปนี้จะสร้างลักษณะที่ปรากฏของแถบเลื่อนที่ซ่อนอยู่:

ตัวอย่าง ( jsfiddle )

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

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

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

สิ่งนี้จะทำให้คิวภาพหายไป

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

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

พบได้ที่ลิงค์นี้: http://simurai.com/blog/2011/07/26/webkit-scrollbar

แถบเลื่อนเบราว์เซอร์ไม่ทำงานบน iPhone / iPad ที่ทำงานเรากำลังใช้แถบเลื่อน JavaScript ที่กำหนดเองเช่น jScrollPane เพื่อให้ UI ข้ามเบราว์เซอร์ที่สอดคล้องกัน: http://jscrollpane.kelvinluck.com/

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

อีกวิธีที่ดีในการจัดการกับแถบเลื่อนที่ซ่อนอยู่ของ Lion คือการแสดงพรอมต์เพื่อเลื่อนลง มันไม่ทำงานกับพื้นที่เลื่อนขนาดเล็กเช่นเขตข้อมูลข้อความ แต่มีพื้นที่เลื่อนขนาดใหญ่และรักษารูปแบบโดยรวมของไซต์ เว็บไซต์หนึ่งที่ทำสิ่งนี้คือhttp://versusio.comเพียงตรวจสอบหน้าตัวอย่างนี้และรอ 1.5 วินาทีเพื่อดูพรอมต์:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

การติดตั้งใช้งานไม่ยาก แต่คุณต้องระวังไม่แสดงพรอมต์เมื่อผู้ใช้เลื่อนไปแล้ว

คุณต้องมี jQuery + Underscore และ

$(window).scroll เพื่อตรวจสอบว่าผู้ใช้เลื่อนด้วยตัวเองแล้วหรือไม่

_.delay() เพื่อทริกเกอร์การหน่วงเวลาก่อนที่คุณจะแสดงพรอมต์ - พรอมต์ไม่ควรที่จะเสือก

$('#prompt_div').fadeIn('slow') ที่จะจางหายไปในทันทีและแน่นอน

$('#prompt_div').fadeOut('slow') จะจางหายไปเมื่อผู้ใช้เลื่อนหลังจากที่เขาเห็นพรอมต์

นอกจากนี้คุณสามารถผูกกิจกรรม Google Analytics เพื่อติดตามพฤติกรรมการเลื่อนของผู้ใช้