すべてのプラットフォームでOS Xをスクロールする方法

OS Xのブラウザのスクロールバーには、ネイティブのプラットフォームスタイルがあります。私は実際にこのスタイルを他のプラットフォームにも持ちたいと思っています。 Chromeでスクロールバーの外観をカスタマイズすることは可能です。 Chromeの他のプラットフォームでCSSを使用して「OS Xの外観」を達成する方法はありますか？すべてのプラットフォームでOS Xをスクロールする方法

出典

2016-10-23 MichielB

見てみる価値があります。ニュートラルな表情になるか、OSのスクロールバーを維持するかのどちらかです。しかし、OS Xのユーザ（強制的に意図されている）にOS Yのスクロールバーを使用させることは良い考えではありません。 –

私はこれを知っており、あなたのコメントに感謝します。私が定期的なウェブサイトで働いているなら、私はこれについてやっても決して考えないでしょう！この場合、私は組み込みのWebkitベースのブラウザ用に開発しています。私のアプリはデバイスが表示する唯一のアプリになるので、非ネイティブの外観は問題ではありません。 – MichielB

私はしばらく前に作ったコードです。それを取ってスクロールバーを任意の方法でカスタマイズすることができます。

はこのjsfiddleでそれを試してみてください：http://jsfiddle.net/wLD49/

HTML：

<div class="container"> 
    <div class="scrollable"> 
     <div class="content"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis blandit lectus tempus aliquam. Aenean tempor libero odio, in gravida dui laoreet vitae. Duis porttitor, sem id convallis rhoncus, enim dolor volutpat nibh, vel sollicitudin arcu tortor eget elit. Vestibulum eu eros in ante rutrum porttitor. Quisque volutpat faucibus est, cursus suscipit nisi tincidunt sit amet. Proin leo odio, aliquam ac rutrum eget, rutrum quis dui. Nam tincidunt, diam at fringilla rhoncus, mi lacus faucibus sem, eu dapibus nunc felis ac nisl. 
     </div> 
     <div class="scrollbar"></div> 
    </div> 
</div>

CSS：

.container { 
    width: 200px; 
    height: 100px; 
    overflow: hidden; 
    border: 1px solid blue; 
    position: relative; 
} 

.scrollable { 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 100%; 
    height: 100%; 
    padding-right: 30px; 
} 

.content { 
    /* 10px for the scroll bar plus some extra spacing */ 
    padding-right: 12px; 
} 

.scrollbar { 
    width: 8px; 
    height: 25px; 
    background-color: lightblue; 
    border-radius: 4px; 
    position: absolute; 
    right:0; 
    top: 0; 
} 

.scrollable:hover .scrollbar { 
    background: blue; 
}

はJavaScript：

var scrollables = document.getElementsByClassName('scrollable'); 
scrollables[0].addEventListener('scroll', scrolled); 
function scrolled(e) { 
    var content = this.getElementsByClassName('content')[0]; 
    var scrollingRange = content.offsetHeight - this.offsetHeight; 
    var scrollingRatio = this.scrollTop/scrollingRange; 

    var scrollbar = this.getElementsByClassName('scrollbar')[0]; 
    var scrollbarRange = this.offsetHeight - scrollbar.offsetHeight; 
    scrollbar.style.top = String(scrollingRatio * scrollbarRange) + 'px'; 
    console.log(scrollingRatio, scrollbarRange); 
}

出典

2016-10-23 18:28:18

クリックアンドドラッグを使用してスクロールすることはできません。残念なこと。 –

驚くばかり - 私が探していたもの！ – MichielB

@BramVanroy私はちょうどネイティブのスクロールイベントと動作を保持しながら、カスタムスクロールバーを描画するソリューションを作った。あなたは簡単にそれの上にクリックアンドドラッグ機能を追加することができます:) –

あなたがアプリに取り組んでいるので、 Webkit Bas EDデバイスは、それが他のマシン上で多くの人が* *このことを感謝していないことに注意https://css-tricks.com/custom-scrollbars-in-webkit/

::-webkit-scrollbar { 
 
    width: 12px; 
 
} 
 

 
::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
    border-radius: 10px; 
 
} 
 

 
::-webkit-scrollbar-thumb { 
 
    border-radius: 10px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 
}

<html> 
 
    <body> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis magna eget efficitur viverra. Vestibulum feugiat felis maximus condimentum blandit. Etiam fringilla urna non libero malesuada pretium. Nulla facilisi. Nam finibus lacinia dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam eros a tellus rhoncus, sit amet efficitur est sollicitudin. Donec id felis nec sem tempus tempus. Vestibulum convallis elit non rutrum commodo. 
 

 
Nullam viverra consequat est eu fringilla. Nunc ut turpis vulputate, scelerisque sem sed, mattis ligula. Nullam eu arcu ultrices, sagittis urna in, gravida velit. Nullam porta tempor mauris ac molestie. Nunc et orci interdum erat efficitur condimentum quis ut nulla. Donec accumsan tincidunt congue. Cras sollicitudin sit amet metus rhoncus convallis. Vestibulum scelerisque augue sit amet sapien varius venenatis. Sed non orci in dui varius tincidunt nec ac lectus. Suspendisse blandit, neque in efficitur posuere, augue risus aliquet sem, id sagittis turpis nisi non erat. Duis est lectus, egestas sit amet suscipit eu, ultricies non nisi. Phasellus dui lacus, iaculis eget condimentum vel, pulvinar placerat tortor. Etiam pellentesque leo nec egestas dictum. 
 

 
Quisque euismod sodales est ac aliquet. Pellentesque porttitor mi aliquet cursus maximus. Nullam tincidunt non diam interdum laoreet. Aenean vel cursus odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque cursus, nibh quis semper tempor, felis justo dignissim turpis, eget accumsan leo nisl viverra sapien. Vestibulum quis vestibulum turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mauris ante, mollis eget iaculis ut, feugiat non dui. Nullam quis mi ornare, porta metus quis, accumsan augue. Curabitur accumsan tempus aliquam. Vestibulum elementum at lectus in auctor. Donec consectetur eleifend purus consectetur pellentesque. 
 

 
Ut porttitor est at magna laoreet, sit amet vestibulum sem suscipit. Vivamus eget erat congue, tincidunt tellus et, elementum augue. Nulla sit amet est iaculis, elementum massa sit amet, bibendum enim. Duis mollis, velit et hendrerit dictum, ligula tortor laoreet dui, eget aliquet felis dolor sed massa. Suspendisse potenti. Fusce iaculis nisl non velit bibendum, quis placerat nisi interdum. Maecenas faucibus ligula non pulvinar laoreet. Fusce sagittis massa ut lorem facilisis, in ullamcorper velit tristique. Morbi a facilisis elit. Sed blandit nulla at scelerisque scelerisque. 
 

 
Praesent rhoncus tincidunt diam quis auctor. Maecenas blandit commodo commodo. Pellentesque quis dolor id urna maximus tristique vitae id lectus. Phasellus convallis accumsan nibh ac ornare. Pellentesque hendrerit ex in rutrum ultrices. Aenean nisi eros, bibendum non metus ac, tincidunt hendrerit lorem. Cras feugiat, augue et auctor auctor, felis libero sagittis justo, ac pulvinar quam arcu eu dolor. Praesent lectus mauris, molestie in elit quis, scelerisque consectetur lectus. Phasellus ac scelerisque leo. Nullam eget interdum sapien. Suspendisse et urna sodales, venenatis augue ac, volutpat nisi. Mauris non fermentum nibh. 
 

 
Proin nec augue et lectus congue pretium. Nullam orci nibh, sagittis vitae ex in, iaculis viverra erat. Praesent vitae lorem urna. Sed mi nibh, accumsan eget fringilla vitae, gravida non orci. Aenean justo massa, finibus non aliquet quis, fermentum et odio. Donec scelerisque est nunc, sit amet vulputate libero sodales a. Integer placerat felis eu enim porttitor tristique. Phasellus vestibulum tempus magna. Quisque commodo sodales dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nisi eget purus dapibus, quis pharetra magna bibendum. Sed id gravida lorem. Quisque dui quam, imperdiet id ultricies nec, ultrices non lacus. In blandit, sapien non laoreet volutpat, elit orci pharetra magna, in volutpat lacus elit nec metus. Ut eu vulputate sapien. Aliquam dictum, orci nec lacinia vestibulum, massa elit sollicitudin nisl, faucibus facilisis massa neque vestibulum eros. 
 

 
Cras sed aliquam leo. Proin porttitor tincidunt enim, eget luctus justo. Aenean ultricies non urna quis interdum. In elit purus, ultrices et mollis sed, ullamcorper finibus ante. Vestibulum fringilla erat at orci ornare, eu vestibulum risus tincidunt. Proin a mauris quam. Ut dignissim ullamcorper volutpat. Sed tincidunt porta ornare. Donec sed ullamcorper mauris. Nulla mauris leo, egestas a eleifend ac, convallis a augue. Phasellus sollicitudin lorem ac sapien luctus finibus. Proin nec nisl dictum, consequat metus lacinia, pellentesque magna. Nam posuere hendrerit turpis, sit amet venenatis nisi congue sed. Suspendisse dui sem, placerat non felis sit amet, scelerisque cursus risus. 
 

 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla cursus pharetra felis, a porta nunc convallis ac. Nullam laoreet lorem ultrices nisl gravida, at rutrum nisl condimentum. Curabitur ac faucibus dolor. Nullam hendrerit maximus mi, pulvinar venenatis ex tincidunt nec. Sed ullamcorper sit amet dolor eu venenatis. Ut sodales in orci sed tempor. Nullam nisl quam, convallis sit amet nulla id, vulputate sagittis est. Suspendisse egestas viverra quam, eget gravida massa luctus rhoncus. Nulla leo magna, commodo non maximus venenatis, ultricies eget mi. Quisque arcu magna, vehicula ac leo vel, gravida feugiat leo. Praesent at accumsan urna. Sed semper, nunc sed aliquam euismod, metus ex dignissim nisl, et dictum leo nibh quis dolor. Duis et purus quis augue aliquam lobortis ut eget ipsum. 
 

 
Vestibulum pretium dignissim dolor, vel efficitur nisl vestibulum et. In aliquet ultricies eleifend. Donec tempor diam at pellentesque pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum imperdiet eu urna sit amet vestibulum. Ut sagittis odio nec sapien dapibus porttitor. Mauris lorem nibh, tempor non mi vel, vulputate fringilla libero. Sed varius massa eu metus elementum rhoncus. Phasellus vel interdum felis. Sed nec vulputate diam. 
 

 
Integer tempus mattis aliquet. Nulla fermentum ex nec vestibulum bibendum. Aliquam in metus quis velit sollicitudin ornare quis et arcu. Fusce vitae ligula at libero pretium tincidunt. Praesent finibus metus nec posuere viverra. Nullam ac mattis mauris, ut vehicula enim. Proin efficitur fringilla mi sed maximus. Donec vel tempor nibh. Duis malesuada mauris et eros ultricies sollicitudin. Sed eget elementum libero. In vulputate lectus a ipsum eleifend, vel feugiat ex ornare. 
 

 
    </body> 
 
</html>

出典

2016-10-25 08:20:50 Baleato

すべてのプラットフォームでOS Xをスクロールする方法

答えて

関連する問題