I set a ul of product variants with horizontal scroll. When i scroll and click on a variant, the page refresh and the scroll return to start. I need to maintain the posistion where it was first of refresh to let see the clicked variant.
ul#group_17 {
width: 150px;
display: flex;
overflow: auto;
list-style: none;
}
li {margin: 0 10px 0 0}
.input-color {
position: absolute;
opacity: 0;
cursor: pointer;
height: 60px;
width: 60px;
}
span {
height: 60px;
width: 60px;
display: block;
} <ul id="group_17">
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="87">
<span class="color texture" style="background:black"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="88" checked="checked">
<span class="color texture" style="background:brown;"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="89">
<span class="color texture" style="background:red"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="90">
<span class="color texture" style="background:yellow"></span>
</label>
</li>
</ul>How can i do?