Make a hidden scroll on x axis

HTML-CSS
1

How could i go about making a hidden scroll on the X axis of a div? Like if i have a very basic box with a <h1> inside of it, and the text becomes longer then the box itself, can i scroll to the x axis (of div) and but with no scroll bar?

This is the box i am working with:

.outputElement {
  width: 226px;
  margin-left: 3%;
  height: 40px;
  border: 1px solid black;
}

<div class="outputElement">
      <h3>Text</h3>
 </div>

How to target scroll bar w/ webkit:

::-webkit-scrollbar { 
    display: none; 
}

You can use webkit to remove the scroll bar by targeting it and changing width and height being 0px, but i couldn’t get it to scroll. Some say it doesn’t work on certain browsers either. The element would reform to the box itself and scroll on the y.

For scrolling i attempted overflow-x: auto; if that helps.

Ideas?

2

I am not exactly sure what you are wanting to achieve. Here is what I have come up with using your same HTML

<div class="outputElement">
      <h3>Text</h3>
 </div>

along with this css.

div.outputElement {
  width: 226px;
  margin-left: 3%;
  height: 60px;
  border: 1px solid black;
	overflow:hidden;
}
h3{
	position:relative;
	left:90px;
	height:20px;
	overflow: scroll;
	display:flex;
}
::-webkit-scrollbar { 
    display: none; 
}

Within the CSS I am defining that classes with outerElement should have an overflow of scroll and display of Flex.

then the css states that h3 containers should have an added position:relative, along with left: 90px to adjust the location the object should remain within the div.

Finally, I used your webkit to remove the scroll bar from the container. (note, this also removes it from the rest of the document as well. You might consider adding the -webkit-scrollbar { display: none } to the h3 css instead.

Please let me know if this helps. I am having a tough time visualizing what you are wanting to achieve.

3

Another, perhaps old school technique would be to use a <marquee> tag just inside the <h3> tags?

<marquee>Text within this area should only reach the end of the div and constantly scroll left</marquee>

4

For your first concept i get:

image
image1920×1040 78.8 KB

It works kinda, and the margins are way off

I just want a hidden scroll bar on the x axis

I was going to use marquee, but it seems its outdated and wont be supported much longer.

5

(The box you made is in the output)

6

So… Any ideas?____

7

I am drawing a blank at the moment. Sorry about that.

From the looks of the screenshot, maybe you could increase the height of the output div a bit to show the numbers. You could set the position you want for them using

Position: relative;
height:70px;
overflow:hidden;

I wish I knew of a better solution. My brain hurts today though

8

I’m still confused? Where do i put this in the CSS code you gave me?