translating creates vacant spaces on both sides

I am working with a 

<div class="scrollable">
that has the CSS property overflow: scroll;. Additionally, I have another 
<div class="line1"></div>
which should not trigger any scrolling on the 
<div class="scrollable">
(as I plan to animate the translation of 
<div class="line1"></div>
later). To achieve this, I created an outer div with overflow:hidden. However, when I apply the translation animation (seen in the blue box), it creates a white area on the left side which is not the desired outcome (I want it to behave like the right side). Any suggestions on how to resolve or modify this issue would be greatly appreciated. Thank you in advance.

.scrollable {
  overflow: scroll;
  width: 200px;
  height: 300px;
  border: 2px solid red;
}

.inner-container {
  width: 300px;
  height: 150px;
  background-color: gray;
}

.no-scroll {
  width: 300px;
  overflow: hidden;
}

.line1 {
  height: 50px;
  margin-left: -50px;
  width: 500px;
  background-color: blue;
  animation: wave 4s 0.1s infinite linear;
}

@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0, 50%, 0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0, 50%, 0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0, 50%, 0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0, 50%, 0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0, 50%, 0) rotateZ(-360deg);
    transform: rotateZ(-360deg) translate3d(0, 50%, 0) rotateZ(360deg);
  }
}
<div class="scrollable">
  <div class="inner-container"></div>
  <div class="no-scroll">
    <div class="line1"></div>
  </div>
</div>

css

Answer №1

Your .line1 (wave) div is not properly centered, which is causing the blank space on the left side when the animation moves the object to the right. To fix this issue, you can center it by using margin-left: -250px. This adjustment should resolve the problem. Refer to the example provided below.

.scrollable {
  overflow: scroll;
  width: 200px;
  height: 300px;
  border: 2px solid red;
}

.inner-container {
  width: 300px;
  height: 150px;
  background-color: gray;
}

.no-scroll {
  width: 300px;
  overflow: hidden;
}

.line1 {
  height: 50px;
  width: 500px;
  margin-left: -250px;
  background-color: blue;
  animation: wave 4s 0.1s infinite linear;
}

@keyframes wave {
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0, 50%, 0) rotateZ(0deg);
    -moz-transform: rotateZ(0deg) translate3d(0, 50%, 0) rotateZ(0deg);
    transform: rotateZ(0deg) translate3d(0, 50%, 0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg) translate3d(0, 50%, 0) rotateZ(-360deg);
    -moz-transform: rotateZ(360deg) translate3d(0, 50%, 0) rotateZ(-360deg);
    transform: rotateZ(-360deg) translate3d(0, 50%, 0) rotateZ(360deg);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="scrollable">
    <div class="inner-container"></div>
    <div class="no-scroll">
      <div class="line1"></div>
    </div>
  </div>
</body>

</html>

Answer №2

Within this code snippet, you will find an element that needs to be expanded and manipulated using percentage instead of pixels.

For example :
width: 120%;
right : -40% or -40px;

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

Achieving full-width container on mobile devices with Bootstrap

Despite my efforts in the CSS file, I am still struggling to get the container to take up the full width on mobile devices. Here is my CSS code: @media (max-device-width: 1024px) { .col-sm-2{ width: 100%; } .container { margin: 0 auto; width: ...

htmlcssbootstrap-4

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4

Preventing Div items from rearranging during size transitions using toggleClass

When I click on an element with the ID "id", I use toggleClass to resize a div from 10px to 500px in width. This is done partly to show/hide content. However, the issue arises when the transition occurs and the contents of the div start rearranging, overfl ...

javascriptjqueryhtmlcss

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

javascripthtmlcsseventsonclick

Formatting won't assist in aligning Facebook button

I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...

htmlcss

Issue with ngStyle function in Internet Explorer

Within my Angular 4 application, I have defined styles as shown below: [ngStyle]="{'border': getInterleaveColor(i)}" The following function is also included: getInterleaveColor(auditNumber) { var borderProperties = '2px solid'; ...

javascriptcssangularng-style

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

phphtmlcss

div cannot be placed next to each other

My code snippet is located at http://jsfiddle.net/kXesZ/. I am trying to align the two social media icons to the bottom edge of a background image but I am having trouble getting them to display inline. I've attempted various methods such as using dis ...

cssxhtml

Display issue with ul and li elements in Safari browser causing menu to appear incorrectly

Although I am new to CSS, I managed to create a menu on my website that hovers over the background video successfully. It is a basic menu using a ul with li elements and it appears as intended in all browsers except Safari. In Safari, the menu items stack ...

wordpresscsssafari

The reason the CSS direct descendant selector does not affect Angular components

We are working with a basic main.html. <app> <sidebar></sidebar> <main-content> <router-outlet></router-outlet> </main-content> </app> After loading a component through routing (changing the ...

htmlcssangular

Enhancing an image with zoom effect in a 2-column layout on hover

Could someone help me achieve a 2-column layout where the left column contains text and the right column an image? I want the image in the right column to zoom when the user hovers over either the left or right column. The issue is that when the user hove ...

htmlcss

Experiencing difficulties with running the prefixer script in npm

I'm facing issues while trying to run prefix CSS despite having installed the necessary npm packages like prefixer and postcss-cli in my development environment. When attempting to run the prefixer for my CSS file, I encountered some errors. Here&apos ...

cssnode.jsnpmsassnode-sass

An interactive selection tool for a website's navigation bar

Struggling to implement a dropdown menu for my navbar, none of the CSS methods I've tried seem to work. My current HTML code is as follows... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t ...

cssdrop-down-menunavigationuinavigationbarnavbar

Scrolling with jQuery just got a sleek upgrade with our new

Can anyone suggest a jQuery scrollbar that resembles the clean black bar found on the iPhone? I need a simple design without visible up or down buttons. Many scripts I came across offer more features than necessary for my project. My div element has a fi ...

javascriptjquerycssscrollbar

Troubleshooting problem with Vuetify's parallax fluid template

In my quest to implement a fluid template for responsive design viewports, I encountered an issue. The layout looks good on medium viewports (md) but fails to scale correctly on smaller viewports (sm or xs). This is because the height of the parallax backg ...

cssvue.jsparallaxvuetify.js

The never-ending scroll feature in Vue.js

For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...

htmlcsstypescriptvue.jsinfinite-scroll

Background image changing due to React re-render

I'm working on a React component that generates a random background image each time a user visits the page. However, I'm facing an issue where the background image updates every time a user types something into an input field. I've tried usi ...

cssreactjs

Manipulate a 3D shape by transforming both the x and y axes using jQuery's mousemove

I am trying to create a 3D element that rotates on both the x and y axes based on the position of the mouse on the screen. While I have successfully achieved this effect using either the X or Y position, I am struggling to make it work simultaneously for b ...

jquerycssmousemove

Altering CSS attribute values using a random number generator

Is there a way to randomly change the animation-duration attribute in the following CSS code? I want it to range from 0 to 1. @keyframes blink { 50% { border-color: #ff0000; } } p{ animation-name: blink ; animation-duration: 0.1s ; animatio ...

javascripthtmlcss

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

javascripthtmlcss