Khi đến section thì fixed section, lăn chuột thì scroll ngang các item bên trong đến cuối thì scroll xuống dưới tiếp
Fri Aug 15 2025 02:44:10 GMT+0000 (Coordinated Universal Time)
Saved by @vanthien
<style>
/* Your full existing CSS — exactly as you gave it */
.mdw-horizontal-scroll{
--progress-bar: true;
--progress-bar-color: ;
--progress-bar-height: 2px;
}
body{
--disable-movement-desktop: false;
--disable-movement-tablet: false;
--disable-movement-mobile: true;
--hide-default-scrollbar: false;
--disable-horizontal-scroll-mobile: false;
}
html.hide-scrollbar::-webkit-scrollbar{
display: none;
}
html.hide-scrollbar{
-ms-overflow-style: none;
scrollbar-width: none;
}
@media (min-width: 768px) {
.mdw-horizontal-scroll{
overflow: hidden;
--initial-height: var(--min-height,100vh);
}
.mdw-horizontal-scroll:after{
content: "";
left: 0;
top: calc(100vh - var(--progress-bar-height,2px));
width: 100vw;
height: var(--progress-bar-height,2px);
background: var(--progress-bar-color,FFFF00);
transform: scaleX(calc(var(--progress,0)*100%));
position: fixed;
transform-origin: left;
will-change: transform;
transition: transform 0.1s linear;
opacity: 0;
}
.mdw-horizontal-scroll.fixed:after{
opacity: 1;
}
.mdw-horizontal-scroll.progress-bar-disabled:after{
display: none;
}
.mdw-horizontal-scroll > .e-con,
.mdw-horizontal-scroll > .e-container{
transition: none;
height: var(--initial-height,100vh);
}
body.tiny-scroll .mdw-horizontal-scroll > .e-con,
body.tiny-scroll .mdw-horizontal-scroll > .e-container{
will-change: transform;
transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.mdw-horizontal-scroll.fixed > .e-con,
.mdw-horizontal-scroll.fixed > .e-container{
position: fixed;
top: 0;
left: 0;
}
.mdw-horizontal-scroll.bottom{
justify-content: flex-end;
}
.mdw-horizontal-scroll > .e-con > *,
.mdw-horizontal-scroll > .e-container > *{
height: var(--min-height, 100vh);
}
.mdw-horizontal-scroll.hs-disabled{
height: auto !important;
}
.mdw-horizontal-scroll.hs-disabled:after{
display: none;
}
.mdw-horizontal-scroll.hs-disabled > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container{
flex-direction: column;
height: auto;
}
.mdw-horizontal-scroll.hs-disabled.fixed > .e-con,
.mdw-horizontal-scroll.hs-disabled.fixed > .e-container{
position: relative;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > *,
.mdw-horizontal-scroll.hs-disabled > .e-container > *{
height: auto;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container > .e-container{
width: 100%;
}
}
/* Scrolling Movement */
.e-con[class^='mdw-hs-movement'],
.e-con[class*=' mdw-hs-movement'],
.e-container[class^='mdw-hs-movement'],
.e-container[class*=' mdw-hs-movement'],
.elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
transform: translateX(calc(var(--e-transform-translateX,0px) + var(--translateX,0)*-1px)) translateY(calc(var(--e-transform-translateY,0px) + var(--translateY,0)*1px)) rotate(calc(var(--rotateZ,0deg) + var(--rotate,0)*1deg));
transition: none;
}
body.tiny-scroll .e-con[class^='mdw-hs-movement'],
body.tiny-scroll .e-con[class*=' mdw-hs-movement'],
body.tiny-scroll .e-container[class^='mdw-hs-movement'],
body.tiny-scroll .e-container[class*=' mdw-hs-movement'],
body.tiny-scroll .elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
body.tiny-scroll .elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
will-change: transform;
transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.e-con[class^='mdw-hs-movement-translate-x'],
.e-con[class*=' mdw-hs-movement-translate-x'],
.e-container[class^='mdw-hs-movement-translate-x'],
.e-container[class*=' mdw-hs-movement-translate-x'],
.elementor-widget[class^='mdw-hs-movement-translate-x'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-x'] .elementor-widget-container{
--translateX: calc(var(--parallax,0)*var(--speed-x,10)*var(--direction-x,1));
}
.e-con[class^='mdw-hs-movement-translate-y'],
.e-con[class*=' mdw-hs-movement-translate-y'],
.e-container[class^='mdw-hs-movement-translate-y'],
.e-container[class*=' mdw-hs-movement-translate-y'],
.elementor-widget[class^='mdw-hs-movement-translate-y'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-y'] .elementor-widget-container{
--translateY: calc(var(--parallax,0)*var(--speed-y,10)*var(--direction-y,1));
}
.e-con[class^='mdw-hs-movement-rotate'],
.e-con[class*=' mdw-hs-movement-rotate'],
.e-container[class^='mdw-hs-movement-rotate'],
.e-container[class*=' mdw-hs-movement-rotate'],
.elementor-widget[class^='mdw-hs-movement-rotate'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-rotate'] .elementor-widget-container{
--rotate: calc(var(--parallax,0)*var(--speed-r,10)*var(--direction-r,1));
}
/* Reveal Animtion */
.mdw-reveal-animation,
.mdw-reveal-animation-left,
.mdw-reveal-animation-right,
.mdw-reveal-animation-top,
.mdw-reveal-animation-bottom{
animation: none !important;
transition: all 1s ease-in-out !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-left:not(.animated),
.mdw-reveal-animation-right:not(.animated),
.mdw-reveal-animation-top:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
opacity: 0;
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
transform: translateY(2em);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.mdw-reveal-animation-left:not(.animated){
transform: translateX(-2em);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.mdw-reveal-animation-right:not(.animated){
transform: translateX(2em);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.mdw-reveal-animation-top:not(.animated){
transform: translateY(-2em);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
/* For Mobile Devices */
@media (max-width: 767px){
.mdw-horizontal-scroll > .e-con,
.mdw-horizontal-scroll > .e-container{
transition: transform 0.1s linear;
}
}
.mdw-horizontal-scroll{
position: relative;
z-index: 9;
}
/* === ADDED: smooth transition on container === */
.mdw-horizontal-scroll .e-con,
.mdw-horizontal-scroll .e-container {
will-change: transform;
/* Default no transition, will be set dynamically */
transition: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if(!MDWNonce109){
var MDWNonce109 = true
;(function($){
function init(){
$('body').append('<div class="mdw-100vh" style="height: 100vh;display: none;"></div>')
if($('body').css('--hide-default-scrollbar') && $('body').css('--hide-default-scrollbar').trim() == 'true'){
$('html').addClass('hide-scrollbar')
}
}
function getValue(text, defaultValue){
return (text.match(/\d+/) ? text.match(/\d+/)[0] : defaultValue)/100
}
function getDirection(text){
return text.search('reverse') > -1 ? -1 : 1
}
function horizontalScroll(scroll, windowWidth, windowHeight, disableMobile){
$('.mdw-horizontal-scroll').each(function(){
var $this = $(this),
container = $this.find('.swiper-wrapper').eq(0),
containerTop = $this.offset().top,
totalWidth = 80,
extraWidth = 0,
passed = scroll - containerTop,
translate = passed,
minHeight = $this.css('--min-height') ? $this.css('--min-height') : '100vh';
if($this.find('.four-step-left').length > 0){
totalWidth = $this.find('.four-step-left').offset().left + 80;
}
container.children('.swiper-slide').each(function(){
totalWidth += $(this).outerWidth() + parseFloat($(this).css('margin-left')) + parseFloat($(this).css('margin-right'));
});
if( windowWidth < 768 && disableMobile ){
totalWidth = windowWidth;
$this.addClass('hs-disabled');
}else{
$this.removeClass('hs-disabled');
}
$this.attr('total-width', totalWidth);
if(totalWidth > windowWidth){
extraWidth = totalWidth - windowWidth;
}
$this.height('calc(' + minHeight + ' + ' + extraWidth + 'px)');
if(passed < 0){ translate = 0; }
if(passed > extraWidth){ translate = extraWidth; }
var progress = translate / extraWidth;
if(progress <= 0){
$this.removeClass('fixed bottom');
}
if(progress > 0 && progress < 1){
$this.addClass('fixed');
$this.removeClass('bottom');
}
if(progress >= 1){
$this.removeClass('fixed');
$this.addClass('bottom');
}
// Apply smooth transition only at start/end scroll
if (progress <= 0 || progress >= 1) {
container.css('transition', 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)');
} else {
container.css('transition', 'none');
}
container.css('transform', 'translateX(-' + translate + 'px)');
$this.css('--progress', progress);
if($this.css('--progress-bar') && $this.css('--progress-bar') == 'true'){
$this.removeClass('progress-bar-disabled');
}else{
$this.addClass('progress-bar-disabled');
}
});
}
function scrollActivity(){
var scroll = $(window).scrollTop(),
windowWidth = window.innerWidth,
windowHeight = window.innerHeight,
disableMobile = $('body').css('--disable-horizontal-scroll-mobile') && $('body').css('--disable-horizontal-scroll-mobile').trim() === 'true';
if($('body').css('--disable-movement-desktop') && $('body').css('--disable-movement-desktop').trim() === 'true'){
if(windowWidth >= 1024) return;
}
if($('body').css('--disable-movement-tablet') && $('body').css('--disable-movement-tablet').trim() === 'true'){
if(windowWidth < 1024 && windowWidth >= 768) return;
}
if($('body').css('--disable-movement-mobile') && $('body').css('--disable-movement-mobile').trim() === 'true'){
if(windowWidth < 768) return;
}
horizontalScroll(scroll, windowWidth, windowHeight, disableMobile);
}
function scrollToSection(e){
var href = $(this).attr('href');
if(href && href.indexOf('#') === 0){
e.preventDefault();
var offset = 0;
var $target = $(href);
if($target.length){
$('html, body').stop().animate({scrollTop: $target.offset().top - offset}, 600);
}
}
}
$(document).ready(function(){
init();
scrollActivity();
$('body').on('click', 'a', scrollToSection);
});
$(window).on('scroll resize load', function(){
scrollActivity();
});
})(jQuery)
}
</script>
Comments