#simplebar

[studiodoli]

iOS13以降でもスクロールバー表示させるのって、結構面倒なんですね。 ★CDNから以下を取得

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.4/simplebar.min.css" integrity="sha512-rptDreZF629VL73El0GaBEH9tlYEKDJFUr+ysb+9whgSGbwYfGGA61dVtQFL0qC8/SZv/EQFW5JtwEFf+8zKYg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.4/simplebar.min.js" integrity="sha512-K//QeDiscFFAs5yljnbZCuoAmzv5KdtVY0W70WLQZ+BFCxi4PotspvxZwpaGJOao2l4oIQhgsHX5tHxyRe+YYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

★HTMLで対象タグの属性に以下の記述追加

data-simplebar data-simplebar-auto-hide="false"

★CSSで以下の設定

// スクロールバー本体の例 .simplebar-scrollbar::before { background: #28385E; border-radius: 4px; width: 4px; margin-left: 2px; margin-top: 2px; } // スクロールバー本体の透明度（デフォルトは透明なので） .simplebar-scrollbar.simplebar-visible::before { opacity: 1; } // スクロールバーの背景部分の例 .simplebar-track { background-color: #FFBC61; }

[iamcashdotcom]

This Thursday!!! Come out and have a good time listening to 90s music!! We have a special celebration for @miracledagod going down you don’t wanna miss!!! #TheOfficial90sParty is back with @ #SimpleBar #Thursday #November 21st from 9pm to 2am, #RSVP for #Free Entry, also put @Superboss3232 on all post for #Tables & #Bottles (at A Simple Bar) https://www.instagram.com/p/B5HFeHAnULd/?igshid=16mfk1u2k6lj2

[neverstoprhymingllc]

Pull Up. Hop Out. Make it look Sexy. Tonight it’s going down come support, I’m looking forward to performing this new music I got. #LIVEatSimpleBar #Mixer #RedCarpet #Show & #LIVE #Performance with #DaManDaMythDaLegendJoseph / @Superboss3232 #Hostin with me #Performing #Live #Thursday #July #24th #9pm to #2am @ #SimpleBar, @l.i.v.e.at #JHarrisonMusicGroup #LIVEat #JHarrisonEntertainment #JHarrisonProductions (at A Simple Bar) https://www.instagram.com/p/B0TtblFBYXd/?igshid=jhfubzbnimk3

[cerberus-writes]

don't take this as an indicator of anything other than my urge to code every time i get stressed out by things but am i extremely proud of the 1. working links on curved text, 2. the fully functional custom scrollbar, 3. the actual organisation of the code behind the scenes so the files aren't 900 lines of nonsense??? absolutely yes to all of those

[ scrollbar credit: simplebar by grsmto ]

[maliceousskates]

I want to give a HUGE thanks to everyone who supported the “Maliceous Skates co. & Just Teach Holiday Toy Drive” this year. I hope you’re ready for next year, we are gonna go even BIGGER!!! 🎁🎄🎉👫❤️🌻www.Maliceousskates.com #MLCSco #MaliceousSkates #SimpleBar #WOM #WordOfMouth #RanchoCienega #SkateLife #LA #WorldWide #GiveBack #HolidaySeason #DoItForTheKids #RanchoCienega #DorseyPark #LosAngeles #Gifts #ToyDrive #Life #GodIsGood #Dorsey #LosAngeles #AJ1 #SBB #Jordan #ShatteredBackBoard 📸 cc: @yungxdad (at A Simple Bar)

[lovetray]

She dragged me out!!! #simplebar #friday #nighttimeadventures #friends #amigas #love #tgif #labordayweekend #socal #losangeles #xoxo (at A Simple Bar)

[mtindicators]

(via SimpleBars V2 Metatrader 5 Forex Indicator)

[javascriptw3schools]

simplebar: A Vanilla JavaScript Library for Custom Scrollbars - https://t.co/6gq0I7Qa7q

[webpacknews]

simplebar: A Vanilla JavaScript Library for Custom Scrollbars - https://t.co/6gq0I7Qa7q

[webwebwave]

スクロールバーのデザインをシンプルに

[vuejs2]

simplebar: A Vanilla JavaScript Library for Custom Scrollbars - https://t.co/6gq0I7Qa7q

[iamcashdotcom]

Tomorrow we turn the fuck up... period!!!! Come through or be the one who misses out!!! It’s show time!!! #LIVEatSimpleBar #Mixer #RedCarpet #Show & #LIVE #Performance with #DaManDaMythDaLegendJoseph / @Superboss3232 #Hostin with me #Performing #Live #Wednesday #July #31st #9pm to #2am @ #SimpleBar, @l.i.v.e.at #JHarrisonMusicGroup #LIVEat #JHarrisonEntertainment #JHarrisonProductions (at Los Angeles, California) https://www.instagram.com/p/B0isACun8vK/?igshid=1qvl6rg7mn8u6

[masaa-ma]

SimpleBar - ページ内スクロールをサポートする軽量ライブラリ

from http://www.moongift.jp/2018/09/simplebar-%e3%83%9a%e3%83%bc%e3%82%b8%e5%86%85%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%92%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88%e3%81%99%e3%82%8b%e8%bb%bd%e9%87%8f%e3%83%a9%e3%82%a4/

Web上でダッシュボードなどを提供すると、様々な情報をまとめて表示しなければなりません。何も考えずに表示してしまうと、縦スクロールがすごいことになるでしょう。そこでページ内のコンポーネントごとにスクロールがあると便利です。

SimpleBarはそんなページ内スクロールを提供するライブラリです。依存性もなく簡単に使えるのがポイントです。

SimpleBarの使い方

スクロール例です。ページ内にスクロールバーが表示されます。これはスクロール時しか表示されません。

http://images.moongift.jp/2018/08/open-source-simplebar-4.06cdee85c0addbbb218770383cf29b5a.gif

[cerberus-writes]

hi!! i'm trying to use the simplebar in my game and i, for the life of me, can't get it to work. would you mind doing just a basic step-by-step explanation of how to install it? i'd really appreciate it ;A;

hiiii i'll try my best to answer this considering i've not touched anything semi-related to this in like. months LOL

just a disclaimer in general that this is probably going to need some coding knowledge, and i've probably got some guides or whatnot in my coding tag if you have general questions about that and StoryInterface! also, if anyone is wondering what on earth this is about, simplebar is a custom scrollbar plug-in that you can check out right here, it's pretty cool.

actual instructions are under a read-more bc the post got pretty long oops

first step i did was include the entirety of the simplebar.js into the story javascript, which involved going through the installation manual and looking at the bit that talks about using the <script> tag. what i ended up doing was grabbing

all the text from the urls and just putting that directly into the file, though you could probably use the <script> tags directly in the story header.

this is the part i'm talking about on the simplebar github page:

so my js file in my editor ends up looking something like this once i've added it in:

go and do the same for the css as well, pretty much using the same method you used for adding the javascript. it'll end up looking something like this once you've added it all in:

alright, so now that you've got the basics down, we're gonna head to storyinterface and all that fun stuff to make it actually work.

this goes into StoryInterface, and what it does is basically suppress any pop-up errors that show up when your window resizes. it's a known issue of simplebar, but not one i was able to figure out an actual workaround for since the passage length in a twine game does change pretty often. and since the actual scrollbar seems to work fine... i simply ignore it.

<script language="JavaScript">    function silentErrorHandler() {return true;}    window.onerror=silentErrorHandler;  </script>

this goes into PassageHeader, and this is the part that actually creates the scrollbar, specifically around the "story" element in your html. it also includes a little script to make sure that your passage jumps all the way back up to the top whenever you start a new passage, so you're not like halfway down the page and thinking, "hold on, why are we somewhere new already-"

<script>if ($('.simplebar-content-wrapper').length > 0) {    var myDiv = document.getElementsByClassName("simplebar-content-wrapper")[0];            myDiv.scrollTop = 0;  }    </script>    <noscript>    <style>      /**      * Reinstate scrolling for non-JS clients      */      .simplebar-content-wrapper {        overflow: auto;      }    </style>  </noscript>  <script>$(document).one(':passageinit', function (ev) {  new SimpleBar(document.getElementById('story'));});</script>

the formatting is, of course, a little finicky bc of tumblr and if it's causing any trouble and you can't seem to format it right, feel free to dm me off anon and i'll see if i can provide you with an actual file for it. but i do think that pretty much covers what i did to add simplebar to the game.

let me know if you have any further questions!

[dopesixty]

Dope beat + dope rhymes equals a dope record!!!!! #Follow @itsleeadrian THE COUNTDOWN: In Two Weeks Official Video Will Drop! The Time has come .... Nomadic Lifestyle 🐪🐪🐪 - 🔥🔥🔥 #BackInTheDay #Music #LeeAdrian #NomadicLifestyle #50centralBet CHECK OUT THE WEBSITE : Www.itsLeeAdrian.com #spreadlove #dope60 #dopesixty #revoltmusicconference #network #simplebars #grind #passion #smart #texas #miami #Music #hiphop #lessismore #certifieddope #letsgo