Tips for creating a single rolling scroll over multiple rows in a grid layout

I successfully implemented a grid layout for displaying four book images in a row with CSS, including responsive overflow. However, the challenge lies in ensuring that only one row scrolls at a time while allowing other rows to scroll simultaneously when overflowing. Below is a snippet of my code:

.book-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 5.5rem;
  width: 90%;
  margin: auto;
  overflow: auto;
}

.book-section-grid>div img {
  width: 100%;
}
<div class="book-section-grid">
  <div>
    <img src="https://via.placeholder.com/220x312/b3d7ff/FFFFFF/?text=Book-A" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  (More image and text elements...)

</div>

Is it possible to incorporate JavaScript to achieve this functionality?

javascripthtmlcssangular

Answer №1

If you're working with Angular and want to create multiple horizontal scrollable divs, consider using an array within an array to maintain control. While flexbox is recommended over a grid for working in rows, I'll be excluding that from my code.

Check out the StackBlitz demo:

https://stackblitz.com/edit/angular-38myfi

Here's how your app.component.ts file might look:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  data = [ ['Photographer #1', 'Photographer #2', 'Photographer #3', 'Photographer #4'], ['Photographer #5', 'Photographer #6']];
}

And here is the corresponding app.component.html template:

<div class="book-section-grid" *ngFor='let array of data;'>
  <div *ngFor='let item of array'>
    <img src="https://via.placeholder.com/220x312/b3d7ff/FFFFFF/?text=Book-A" alt="">
    <h4>{{item}}</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>
</div>

Lastly, the styles in app.component.css define the layout as follows:

.book-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 5.5rem;
  width: 90%;
  margin: auto;
  overflow: auto;
}

.book-section-grid>div img {
  width: 100%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Value comparison displayed in text boxes

Having two textboxes and a script to compare their values can sometimes result in unexpected behavior. For instance, when the value in Textbox2 comes from the database and it happens to be 0, it can cause issues. One possible solution is to allow Textbox1 ...

javascriptjquery

What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...

csstwitter-bootstrapicons

What makes React Native unique when it comes to handling multiple data inputs?

Apologies for my limited English skills. I am trying to structure multiple data entries by adding separate JSON lines for each input, but currently it updates the previous data instead of creating a new one. Below is the sample code I am working with. var ...

javascriptreactjstypescriptreact-native

What could be causing my node server to display a blank page when it is pointing to the /dist folder of an Angular application?

Currently, my node server setup is as follows: const express = require('express'); const app = express(); app.get('*', (req, res) => { res.sendFile(__dirname + '/dist/page/index.html'); }) app.listen(3335, () => { c ...

node.jsangularexpress

PhantomJS 2.0.0 not delaying page loading

In the script provided, there is an array of URLs called links. The function gatherLinks() is designed to collect additional URLs from the sitemap.xml file related to the ones in the links array. Once the number of URLs in the links array reaches a certain ...

javascriptphantomjsscreenshot

Close the fullscreen modal automatically when clicking anywhere inside

Hey there, I'm facing an issue with a button that I want to trigger a full-screen section containing some inputs. I attempted to use Bootstrap's full-screen modal for this purpose, but encountered some challenges. When I clicked anywhere on the ...

javascripthtmlcssbootstrap-4bootstrap-modal

Coloring the entire table as a whole instead of individual cells

I'm struggling with formatting a table that displays roles as "EXISTS" or "MISSING". The issue is that the code I found online to color code the cells is coloring the entire table green, not just the cells with "EXISTS". I'm not very familiar wit ...

htmlpowershell

Save to clipboard without the use of Flash technology

In my search for a way to copy text to the clipboard, I have come across many solutions that either rely on flash or are designed for websites only. I am in need of a method that can copy to the clipboard automatically without flash, specifically for use ...

javascriptjqueryclipboard

javascript Regular Expressions

There's a string with multiple user names: "rb40425,Fri Jan 30 11:35:33 2015@ot7293,Fri Jan...." Desiring to extract only the user names using RegEx in JavaScript, like rb40425 and ot7293. This is my current attempt: replace(/,.*/, ""); However, i ...

javascriptregex

The dynamic countdown timer is malfunctioning as the clock is inaccurately displaying the current time

When I refresh the page, my JavaScript flipclock starts from the beginning. I want it to resume from where it was last stopped before the page refresh. Additionally, I need the timer to stop every day at either 4:00 AM or 4:00 PM. However, when I try to in ...

javascriptphpjquerytimer

Retrieve information from a cell containing HTML formatting

Is there a way for me to save a specific text from a cell in Google Sheets into a variable, and then use it to send an email with the text formatted within an HTML table? For example: Cell in Google Sheets: "Lorem ipsum dolor sit amet. Ut tenetur a ...

htmlgoogle-apps-scriptgoogle-sheets

Remove specified JSON elements according to a designated list of permitted elements

My task involves filtering an array of allowedFields that corresponds to the keys in a JSON array created from a form. Some fields obtained are not necessary for validation at this point, so I aim to compare the values in the JSON array with those in the ...

javascriptarraysjson

Error: Unable to access property 'nTr' as it is not defined

When I invoke the fnSelect function, an error occurs in Chrome: Uncaught TypeError: Cannot read property 'nTr' of undefined This is the code snippet causing the issue: $('#ToolTables_table_id_0, #ToolTables_table_id_1').mousedown(fun ...

javascriptjquerydatatables

Using Jquery to dynamically add an active class to a link if it matches the current URL

Is there a way to modify the code below so that only the exact current URL will have the active class added? Currently, even when the URL is http://localhost/traineval/training, it also adds the active class to http://localhost/traineval/training/all_train ...

javascriptjquery

Tips for effectively utilizing codelyzer within Angular 2

Looking to integrate codelyzer in my project without webpack and using systemjs. I included a tslint configuration but when running npm start, no errors are being detected even though the correct style guide hasn't been followed. What steps should I ...

node.jsangular

Import of Bootstrap causing disruption in positioning of <figure> element

Check out this codepen example: https://codepen.io/anon/pen/Xgqjyq h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: bold; text-align: center; } .content { margin-left: 5px; margin-right: 5px; t ...

htmlcsstwitter-bootstrap

How to use Javascript to fetch HTML content from an external website

Is it possible to access and retrieve scores from for a specific week using AJAX or JSON technology? Each game on the website seems to have a unique class which could make retrieving score information easier. Any guidance or assistance would be greatly ap ...

javascriptajaxjsonjsonp

What is the best way to increase the font size without resizing the parent input element?

Is there a way to increase the font size in this text box without enlarging the box itself? Any suggestions or advice would be appreciated! https://i.sstatic.net/91pon.jpg. Below is my CSS code for reference (the class of the form is 'box'). .bo ...

htmlcss

Extract information from JSON using a filter

Is there a way to extract the data value from the list without relying on index positions, considering that the order of arrays can change? I need to specifically target data where code === "size". Unfortunately, the existing structure cannot be ...

javascriptvue.js

Enhance your Verold model object with engaging animations

Trying to utilize verold for animating 3D models through a script has been challenging. The proper usage of the verold API components seems unclear at the moment. A model has been successfully loaded into the scene with a script attached as an attribute o ...

javascriptthree.jsverold