Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Can I add a scrollbar to a specific passage in sugarcube v 2.14.0

I'm having a minor issue with one of my passages in twine. I have a sort of store page set up, with numerous options for things to purchase, HOWEVER I have too many items to fit on to a single page unless i fullscreen the game. Is there a way that I could add a scrollbar that would appear in the non-full-screened version of my game?


  • Do you mean that the text of the passage is being cut off by the browser window and the browser isn't giving a scroll bar automatically? Or are you trying to make some sort of containing element within the passage?

    I'm not clear on exactly what you're trying to do. If it's the former, what browser are you using? If it's the latter, you can use the overflow CSS property to make a container that automatically generates a scroll bar when needed.
  • sorry for lack of clarification @Chapel. I mean the former, and i'm using google chrome as my browser
  • That is most certainly not the default behavior, so what styles are you using to force it to do that?
  • sorry for lack of clarification @Chapel. I mean the former, and i'm using google chrome as my browser

    I was afraid of that, haha. Generally, a browser generates a scrollbar whenever its needed, and I know for a fact that SugarCube doesn't mess with that.

    Do you:
    1. Have custom CSS or JS running in your browser? Like some sort of extension for accessibility, for instance?

    2. Have any CSS or scripts in your game that adjust the overflow or height of one of the elements: html, body, #store-area, #story, or #passages?

    You could try the code:
    #story {
      overflow: auto; 

    To see if that helps.

    If it still isn't working, we might need to see your CSS and an image of the problem, or better yet, your html file.
  • hmm. well it only seems to happen when I upload it to the hosting site i've been using to share the link with people. When I try it on my end, I can't seem to reproduce the same problem my testers are having. I wonder if it's just the way twine interacts with the forced sizing of windows
  • Oh. Yeah, uses an iframe I believe. Iframes generally get their own scrollbars as needed. Without being able to reproduce the result, it's gonna be hard to fix. As a temporary solution, you could wrap the offending passage or text in a <div>, and then give that div a definite height and an overflow of auto.

    If it's a shop screen, something like:
    What do you want to buy? 
    <div class="shop-inv">\

    And then in the CSS:
    .shop-inv {
      height: 15em; /*play with the specific number*/
      overflow: auto; 

    You'll probably need to figure out which browsers, operating systems, and devices your tester or testers are using, and try to recreate the issue and see what's happening. I don't know of any browsers off hand that don't provide scrollbars to iframes. Do you know if this is maybe an issue specifically effecting mobile or something?

Sign In or Register to comment.