Currently, I'm creating a simple video player to practice. But, I'm facing something that I never saw before, something that I tried for hours find a way to fix but I didn't make it.
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
The problem is: when I hover the input bar, I'm getting wrong hovered position. After of many hours trying discover why this is happenning, I figured out that #time is, indirectly, causing this. The presence of #time is making the input bar probably show the wrong hover time. But I can't remove #time and I need the code in this structure, with divs wrapped. If you remove #time and test the code, you will see that the hover position will be correct.
Here is a screenshot of what I expect to happen =>
image (I cant yet add embed images)
I suspect that this is something related to flex property, and about position as well. But I tried everything to fix this and got no sucess. Could you please, help me understand or fix this?
Also, here is the jsfiddle link if you want => https://jsfiddle.net/9qvLd35a/
Thank you very much.
In your javascript you take the left-value from the entire core-div. But you only need the value from the progressZone. So you can just adjust it like this: var left = document.getElementById('progressZone').getBoundingClientRect() ...
var left = document.getElementById('progressZone').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
And as far as I can see it, this should have solved the issue. I hope I got your problem right :)
Related
I have code that moves a circle around the screen. My goal is to reduce the amount of code with css animation. But I don't understand how to do it. There is a problem that I cannot solve if I use css animation. The circle goes beyond the screen, although I have code to prevent this. Help please
I have JS code as well as html and css. Also, my js code helps with opening the popup.
let elem = document.querySelector('.button');
function check() {
const popup = document.getElementsByClassName('popup');
if (document.getElementById('popup__input').checked = true) {
for (var i = 0; i < popup.length; i += 1) {
popup[i].style.display = 'block';
}
} else {
popup.style.display = "none";
}
}
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.top = randXP;
elem.style.left = randYP;
};
setInterval(changePosition, 1000);
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
main {
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
input[type=text],
select {
width: 100%;
max-width: 758px;
height: 60px;
padding: 12px 20px;
margin: 40px 0;
font-size: 60px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
form {
position: absolute;
display: flex;
justify-content: center;
}
.form__input {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 45px;
padding-right: 45px;
}
.close__button {
width: 0px;
position: absolute;
display: flex;
justify-content: end;
align-items: start;
height: 0px;
cursor: pointer;
border: none;
outline: none;
font-size: 2rem;
font-weight: bold;
background-color: rgb(208, 201, 201);
}
.form__button {
width: 550px;
height: 55px;
margin-top: 110px;
position: absolute;
font-size: 40px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%);
border: 1px solid #000;
border-radius: 10px;
width: 850px;
height: 200px;
background: rgb(208, 201, 201);
justify-content: end;
align-items: end;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
#media (max-width: 1024.98px) {
.button {
width: 80px;
height: 80px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
}
#media (max-width: 890px) {
.popup {
width: 750px;
}
}
#media (max-width: 768.98px) {
input[type=text],
select {
width: 500px;
height: 50px;
padding: 12px 20px;
margin: 50px 0;
font-size: 40px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 350px;
height: 45px;
margin-top: 105px;
position: absolute;
font-size: 30px;
}
.popup {
width: 600px;
}
}
#media (max-width: 620.98px) {
.popup {
width: 480px;
}
input[type=text],
select {
width: 395px;
height: 50px;
padding: 12px 20px;
margin: 50px 0;
font-size: 40px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.close__button {
margin-left: 10px;
}
.form__input {
padding-left: 0px;
padding-right: 0px;
}
form {
margin-left: 10%;
}
}
#media (max-width: 507.98px) {
input[type=text],
select {
width: 280px;
height: 40px;
padding: 12px 20px;
margin: 45px 0;
font-size: 25px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 240px;
height: 35px;
margin-top: 95px;
position: absolute;
font-size: 20px;
}
.popup {
width: 360px;
}
}
#media (max-width: 400.98px) {
input[type=text],
select {
width: 290px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 200px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 360px;
height: 150px;
}
}
#media (max-width: 358.98px) {
input[type=text],
select {
width: 230px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 180px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 290px;
height: 150px;
}
}
#media (max-width: 300.98px) {
input[type=text],
select {
width: 200px;
height: 30px;
padding: 12px 20px;
margin: 35px 0px;
font-size: 20px;
display: flex;
border: 1px solid #ccc;
box-sizing: border-box;
}
.form__button {
width: 140px;
height: 30px;
margin-top: 80px;
position: absolute;
font-size: 15px;
}
.popup {
width: 255px;
height: 150px;
}
}
<main>
<div class="button">
<input onclick="check()" type="checkbox" name="popup__input" id="popup__input" class="popup__check">
</div>
<div class="popup" name="popup" id="popup">
<label class="popup__label">
<form>
<div class="form__input">
<input type="text" id="fname" name="fname"><br><br>
</div>
<div class="close-button__container">
<button class="close__button">×</button>
</div>
<button class="form__button" type="submit" form="nameform" value="Submit">Відправити</button>
</form>
</label>
</div>
<div class="overlay">
</div>
</main>
Since #Cerbus wrote, there is no way to generate random numbers with CSS. Only SCSS can create a random number on the initial build of the CSS file. You could write a keyframe animation in CSS with many steps and random positions.
You could generate these steps with JS :).
I am trying to put the .pop-overlay div to body.
It looks like .appendTo(document.body) works with jQuery 2.X.X but does not work with 3.X.X... I did some research but I am still not sure how to do it in another way.
Any idea how to be compatible with jQuery 3.5.X?
.pop-overlay {
position: fixed;
display: none;
}
$(function () {
var overlay = $('<div class="pop-overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
});
Here is the whole thing I am trying on CodePen: https://codepen.io/pen/rNdgZyq
The append works just fine.
The only thing is that pop-overlay is not visible at default. So change this $(".pop-onload").show(); to $(".pop-onload,.pop-overlay").show();
Demo
$(function () {
var overlay = $('<div class="pop-overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$(".pop-onload,.pop-overlay").show();
$(".xclose").click(function () {
$(".pop-onload").hide();
overlay.appendTo(document.body).remove();
return false;
});
});
.pop-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 9999;
display: none;
}
.pop-onload {
width: 100%;
margin: 0 auto;
top: 4%;
border-radius: 20px;
display: none;
position: fixed;
z-index: 99999;
}
.pop-content {
min-width: 250px;
width: 400px;
min-height: 150px;
margin: 1% auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 20px 35px;
box-shadow: 0 2px 20px #000;
border-radius: 20px;
}
.pop-content a {
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
background-color: #eb883a;
border-radius: 0px 0px 0px 0px;
padding: 10px 30px 10px 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class='pop-onload'>
<div class='pop-content'>
<h2>Good stuff here!</h2>
<p>Let's close this pop-up.</p>
Close Me
</div>
</div>
I have made a toggle-switch in HTML with a label and styled in css. When the toggle is on its working as intended, but when its off the label overlaps with the switch.
The toggle container wont layer on top of the label element. I have tried with z-index and different positions, but to no avail.
Built with React, and the CSS is in the pre-made App.css file.
React // HTML // Javascript
const toggleClasses = classNames('wrg-toggle', {
'wrg-toggle--checked': toggle,
'wrg-toggle--disabled': disabled
}, className);
return(
<div
onMouseOver={() => setHoveredElement(5)}
onMouseLeave={() => setHoveredElement(null)}
>
<div onClick={triggerToggle} className={toggleClasses}>
<div className="wrg-toggle-container">
<label htmlFor="grid">Enable grid</label>
<div className="wrg-toggle-check">
<span>{ getIcon('checked')}</span>
</div>
<div className="wrg-toggle-uncheck">
<span>{ getIcon('unchecked')}</span>
</div>
</div>
<div className="wrg-toggle-circle"></div>
<input type="checkbox" aria-label="Toggle Button" className="wrg-toggle-input" />
</div>
</div>
);
};
CSS code
.wrg-toggle {
touch-action: pan-x;
display: inline-block;
position: relative;
cursor: pointer;
background-color: transparent;
border: 0;
padding: 0;
margin-left: 5em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.wrg-toggle-input {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wrg-toggle-check, .wrg-toggle-uncheck {
position: absolute;
width: 10px;
height: 10px;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
line-height: 0;
opacity: 0;
}
.wrg-toggle-check {
z-index: 3;
left: 8px;
position: absolute;
opacity: 0;
}
.wrg-toggle-uncheck {
opacity: 1;
right: 10px;
top: 2px;
position:inherit;
z-index: 50;
opacity: 1;
background-color: white;
}
label {
float: right;
right: 0.5em;
width: 8em;
margin-left: 0px;
text-align: center;
margin-right: 20px;
background-color: #8E9092;
border-radius: 30px;
border-top-right-radius: 0;
border-bottom-right-radius: 0 ;
height: 24px;
border: solid 1px;
top: -1.3px;
position: relative;
z-index: 0;
}
.wrg-toggle-uncheck span,
.wrg-toggle-check span {
align-items: center;
display: flex;
height: 10px;
justify-content: center;
position: relative;
width: 10px;
}
.wrg-toggle-container{
width: 50px;
height: 24px;
padding: 0;
left: 10em;
border-radius: 30px;
background-color: #f5f6f8;
transition: all .2s ease;
border: solid 1px;
z-index: 100;
}
.wrg-toggle-container .wrg-toggle-check{
width: 50px;
height: 24px;
left: -0.3px;
border-radius: 30px;
background-color:#61dafb;
border: solid 1px;
top: 0px;
}
.wrg-toggle-circle{
transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
position: absolute;
top: 3px;
left: 1px;
width: 22px;
height: 21px;
border: 1px solid #4d4d4d;
border-radius: 50%;
background-color: #fafafa;
box-sizing: border-box;
z-index: 30;
}
.wrg-toggle--checked .wrg-toggle-check{
opacity: 1;
position:relative;
border-top: 2px;
border-left: -3px;
}
.wrg-toggle--checked .wrg-toggle-uncheck {
opacity: 0;
border: 0;
}
.wrg-toggle--checked .wrg-toggle-circle {
left: 27px;
}
.wrg-toggle--checked .wrg-toggle-circle:after {
content: "✔";
color: green;
}
Solved!
added a
.wrg-toggle-container .wrg-toggle-uncheck {
position: absolute;
z-index: 1;
}
I would like to layer multiple DIVs on top of one another while using flexbox to vertically and horizontally center them both.
In the example below, I would like both .whitebox and .bluebox to be vertically and horizontally centered inside of the container, overlapping one another. Currently .whitebox is positioned with absolute position. Is this possible?
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
No need to position the top and left. Just applying absolute positioning is enough because that "pops" the elements into their own layers, so they can be placed at will without affecting other elements in that layer. Once you do that, the align-items and justify-content will do their jobs.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
You can just remove the offsets like below, it will get the small box centered with the existing rules you set on everything else.
.whitebox {
...
/* top: 0; */
/* left: 0; */
}
Edit: The above works in Chrome, but doesn't seem to be working in Firefox.
In fact, I would simplify the entire code as follows. It should work everywhere where flexbox is supported.
.bluebox {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
}
<div class="bluebox">
<div class="whitebox"></div>
</div>
I would rather use the usual method for centering: The container gets position: relative and defined width and height, the elements to-be-centered inside the container get this CSS:
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Plus z-index values for the order in which they are above each other, and possibly opacity so they all can be seen simultaneously...
So in your example, that would be
.container {
height: 16px;
width: 16px;
background-color: white;
border-radius: 4px;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
The flexbox properties are superfluous when you do it this way.
Set your divs up like this:
<div class="parent">
<div class="wrapper">
<div class="whitebox"></div>
<div class="bluebox"></div>
</div>
</div>
Then apply this css:
.parent{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
position:relative
}
.whitebox, .bluebox{
position:absolute;
top:0;
left:0;
}
You can use margin-left and margin-top because you know the height and width of your element.
Explanation:
Move your element from top 50% and from left 50%.
Move your element 4px from right and 4px from bottom.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>
I created an image carousel which shows images there and by x-axis scrollbar, other images will be shown. It works correctly but I want to restrict scrollbar to move only within the viewport. I tried If clause but It had a bug and It was not good enough!
I try to create a carousel-like Amazon but in my case, I have a problem with it.
I upload all HTML CSS and JS on JSfiddle :
Thank you in advance.
I modified your if condition for the mouse-move event with left and right margins.
I added this answer to help your current implementation only.
But you don't have to reinvent the wheel.
There are libraries that leverage
the native scrollbar to implement this kind of custom UI.
An example is
https://github.com/buzinas/simple-scrollbar
This is only one and you can find out more. Because these libraries have polyfills that add more support on older browsers and made to have a better performance.
var div = document.getElementById('movesection');
var isDown = false;
var x1 = 0;
var rightPoint = 0;
var scrollBar = document.querySelector(".feed-scrollbar");
var scrollBarthumb = document.querySelector(".feed-scrollbar-thumb");
div.addEventListener('mousedown', function(e) {
isDown = true;
rightPoint = document.getElementById('carousel-viewport').offsetWidth - (div.offsetLeft + div.offsetWidth);
x1 = e.clientX;
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
var currentPosition = (x1 - event.clientX) + rightPoint;
var leftMargin = scrollBar.offsetWidth - scrollBarthumb.offsetWidth;
var rightMargin = 0;
if (isDown && currentPosition >= rightMargin && currentPosition <= leftMargin) {
div.style.right = currentPosition + 'px';
}
}, true);
.carousel {
width: 100%;
position: relative;
overflow: hidden;
background: #ebebeb;
}
.carousel .carousel-viewport {
width: 100%;
min-height: 80px;
white-space: nowrap;
overflow: hidden;
position: relative;
margin: 0;
}
.carousel .carousel-viewport .carousel-ul {
display: inline-block;
position: relative;
right: 0;
margin: 0 0 14px;
padding: 0;
}
.carousel .carousel-viewport .carousel-ul .carousel-card {
display: inline-block;
text-align: center;
min-width: 145px;
max-width: 270px;
min-height: 200px;
overflow: hidden;
position: relative;
vertical-align: top;
word-wrap: break-word;
}
.carousel .carousel-viewport .carousel-ul .carousel-card:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
min-height: inherit;
}
.carousel .carousel-viewport .carousel-ul .carousel-card img {
width: auto;
height: auto;
max-width: 270px;
max-height: 200px;
vertical-align: middle;
}
.carousel .carousel-viewport .feed-carousel-control {
position: absolute;
top: 55px;
background-color: #fff;
height: 100px;
line-height: 100px;
width: 45px;
text-align: center;
box-shadow: 0 1px 3px #888;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
display: block;
}
.carousel .carousel-viewport .feed-right {
right: 0;
border-radius: 3px 0 0 3px;
clip: rect(-10px, 45px, 110px, -10px);
padding-left: 5px;
}
.carousel .carousel-viewport .feed-left {
left: 0;
border-radius: 0 3px 3px 0;
clip: rect(-10px, 55px, 110px, 0);
padding-right: 5px;
}
.carousel .carousel-viewport .feed-arrow {
display: inline-block;
line-height: normal;
vertical-align: top;
position: relative;
top: 50%;
height: 22px;
width: 13px;
margin-top: -11px;
}
.carousel .carousel-viewport .feed-scrollbar {
display: block;
position: absolute;
height: 6px;
bottom: 0;
left: 0;
width: 100%;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
font-size: 0;
}
.carousel .carousel-viewport .feed-scrollbar .feed-scrollbar-track {
display: block;
background-color: #eee;
height: 1px;
border-radius: 4px;
width: 100%;
position: relative;
top: 2px;
margin: 0;
}
.carousel .carousel-viewport .feed-scrollbar .feed-scrollbar-track .feed-scrollbar-thumb {
display: block;
background-color: #aaa;
height: 6px;
border-radius: 6px;
width: 0;
position: absolute;
top: -2px;
margin: 0;
cursor: pointer;
}
<div class="carousel">
<div class="carousel-viewport" id="carousel-viewport">
<span class="feed-scrollbar">
<span class="feed-scrollbar-track">
<span class="feed-scrollbar-thumb" id="movesection" style="width: 200px;right:0;display: block;"></span>
</span>
</span>
</div>
</div>