The recent increase in smartphone pages is flickable horizontal scrolling. It is a convenient UI that can display the list in a small space than displaying it in the list.
It is also used on EC pages, and I wanted to implement the same horizontal scrolling on my own.
Since it can be created only with basic HTML and CSS, it can be easily implemented with copy and paste.
Then, I will explain the specific method step by step. If you only want to check the demo quickly, please move from the table of contents.
Horizontal scrolling UI as reference
What I referred was the horizontal scrolling of the EC site below.
There are horizontal scrolls at the bottom of the product page, such as “Who bought this product?”
This time, I made these horizontal scroll designs as reference.
Horizontal scroll point to be implemented
Responsive
Responsive compatible with different display methods on smartphone and PC.
Scroll horizontally on a smartphone and line up horizontally on a PC.
Javascript free
Works only with HTML and simple CSS.
Decorate with CSS if you like.
Saves space
If the smartphone page is made with the same volume as the PC, it tends to be longer vertically.
On the other hand, horizontal scrolling takes up less space than grid UI because the UI can arrange multiple elements in a small space.
Implement horizontal scrolling
Then, I will explain the specific horizontal scroll implementation method.
HTML
Assign class = ”horizontal_scroll” to the parent element of the side-by-side elements.
The class name can be changed to any name. Make sure to match the class name of HTML and CSS.
Also, ul and li are used in the sample, but div and section can be used instead.
CSS
Two important points about CSS are:
- display: flex;
- overflow-x: scroll;
Display: flex; arranges elements horizontally, and overflow-x: scroll; allows horizontal scrolling.
-webkit-overflow-scrolling: touch; has the effect of turning horizontal scrolling on iOS into smooth inertial scrolling.
If the screen width is 768px or more, specify overflow-x: inherit; to cancel horizontal scrolling.
demo
We have prepared a demo that was actually implemented. Please check.
See the Pen Horizontal scroll by ざきひー (@zakihiii) on CodePen.default
Bonus: Design CSS for demonstration
The demo is a horizontal scrolling in a ranking format. In order to improve the appearance of the design, CSS for ranking and price is added.
Conclusion
The horizontal scrolling UI is not suitable for PC, but it can be installed in a small space, so it is one of the best solutions for smartphones.
It is also very effective if you use it to display related products and rankings of online shops .
Finally, be careful when installing horizontal scrolling on Rakuten Ichiba,
In the Rakuten Ichiba app, I cannot move the horizontal scroll well by flicking (especially Android version)
Do not install horizontal scrolling on the smartphone product description. It is recommended that you install it on the common part of the product or category page instead.
コメント