@DesignerDS
Web-designer

Как сделать Scroll в сторону при нажатии на кнопку и обратно, если достиг конца?

Добрый вечер

Есть конструкция

<section id="popup1" class="pop-up-window">
	<div class="pop-up_WA">
		<div class="pop-up-hedline_one">рисунок «багряное золото»</div>
        <div class="overflow-scroll">
            <div class="c-toggles">
    			<div class="form_radiobutton text-align-left">
    				<input name="toggles1" id="rb11" type="radio"  mark="11" value="галерея изделия" checked="checked">
    				<label for="rb11">галерея изделия</label>		
    			</div>
    
    			<div class="form_radiobutton text-align-center">
    				<input name="toggles1" id="rb12" type="radio"  mark="12" value="персонализация упаковки">
    				<label for="rb12">персонализация упаковки</label>	
    			</div>
    
    			<div class="form_radiobutton text-align-right">
    				<input name="toggles1" id="rb13" type="radio"  mark="13" value="варианты подарочного набора">
    				<label for="rb13">варианты подарочного набора</label>	
    			</div>
    		</div>
        </div>
</section>

	section.pop-up-window {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.pop-up_WA {
		width: 100%;
		max-width: 1460px;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 10px;
		overflow: hidden;
	}
	
	 .overflow-scroll {
	    width: 100%;		                        
	}
	
	
	
	.elemet-space-beetwen {
	    width: 100%;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    flex-wrap: wrap;
	    margin-top: 80px;
	}
	
	.elemet-space-beetwen .item-link {
		position: relative;
		font-family: 'Halvar', sans-serif;
		font-style: normal;
		font-weight: 300;
		font-size: 20px;
		line-height: 110%;
		/* or 22px */
		color: #000000;
		text-decoration: none;
		text-transform: uppercase;
		margin-bottom: 20px;
		cursor: pointer;
		
		}
		
	.elemet-space-beetwen .item-link:after {
		display: block;
	    position: absolute;
	    right: 0;
	    width: 100%;
	    height: 1px;
	    background-color: #000;
	    content: "";
	    transition: all 0.2s ease-out;
	}

	.elemet-space-beetwen .item-link:hover:after {
		width: 0%;
		position: absolute;
	}


	.pop-up-hedline_one {
		font-family: 'Halvar', sans-serif;
		width: 100%;
		max-width: 1070px;
		font-size: 96px;
		line-height: 100%;
		font-style: normal;
		font-weight: 500;
		margin: 0 auto;
		margin-bottom: 80px;
		color: #000;
		text-transform: uppercase;
		text-align: center;
	}

	.c-toggles {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin: 0 auto;
		margin-bottom: 15px;
	}

	.c-toggles .form_radiobutton input[type=radio] {
	display: none;
}

	.c-toggles .form_radiobutton label {
	font-family: 'Halvar', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	width: 100%;
	border-bottom: 1px solid #DEDEDE;
	padding: 0px 0px 20px 0px;
	display: inline-block;
	font-size: 14px;
	cursor: pointer;

}


	.c-toggles .form_radiobutton input[type=radio]:checked + label {
	border-bottom: 1px solid #000;
	color: #000;
}

	.form_radiobutton {
		width: 35%;
		text-transform: uppercase;
	}
	
	.text-align-left {
	    text-align: left;
	}
	
	.text-align-center {
	    text-align: center;
	}
	
	.text-align-right {
	    text-align: right;
	}

	.block-tab-1 {
		width: 100%;
		margin: 0 auto;
	}

			@media screen and (max-width: 480px) {
			    
			    .pop-up_WA {
			        padding-top: 60px;
			    }
			    
			        .overflow-scroll {
			            overflow: scroll;
			            padding-bottom: 20px;
                        margin-bottom: -20px;
			        }
			
			    	.c-toggles {
			    	    width: 230%;
			    	    margin-bottom: 32px;
			    	}
			    	
			    	.elemet-space-beetwen {
			    	    flex-direction: column;
			    	    justify-content: center;
			    	}
			    	
			    	.elemet-space-beetwen .item-link {
			    	    font-size: 14px;
			}   
			
        			.slide-item-galery img {
        		    	    height: 220px;
        		    	}
        		    	
        		    	section.pop-up-window {
        		    	    height: auto;
        		    	}
			}

<script>
    $(".form_radiobutton").click(function () {
        var leftPos = $('.overflow-scroll').scrollLeft();
    $(".overflow-scroll").stop().animate({scrollLeft: leftPos + 270}, 800);
});
</script>


Смог сделать так, чтобы при клике на таб в мобильной версии он продвигался влево, чтобы был виден следующий, а как сделать так, чтобы функция работала в обе стороны по достижению конца, чтобы активный таб был в зоне видимости?
  • Вопрос задан
  • 15 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы