Photoshop Question posted in
The official user guide can be found here.

How do I create a scrollable div? – Photoshop

I am relatively new to coding and I am looking to re-create this http://prntscr.com/e73jze which I designed in Photoshop. Could anyone give me the simplest way to make this?

Many thanks

Tags:

2

Answers


  1. 0

    Based on your included photo, exactly matching the styling of this design will not have a simple answer. To make a simple <div> with horizontally scrollable content, you could do something like this:

    #wrapper {
  display:flex;
  flex-wrap:none;
  height:200px;
  width:100%;
  background-color:black;
  overflow-x: scroll;
  }

.photo-box {
  flex:0 0 auto;
  margin:25px;
  background-color:white;
  width:300px;
  height:150px;
  }
    <div id='wrapper'>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
  <div class='photo-box'></div>
</div>

    However styling things like the scrollbar are not as simple and would require a fair amount more mark-up.

    Use a div with overflow:scroll as a starting place to get a scrolling box and you can find a jQuery plug-in for making custom scrollbars here.

    Login or Signup to reply.
  2. 0

    Just insert your own images and style the scrollbar.

    #scrollable {
  width: 500px;
  height: auto;
  margin: 100px auto;
  overflow: auto;
  white-space: nowrap;
}
    <div id="scrollable">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search