jquery scrollLeft（）不工作

jquery scrollLeft无法正常工作。为什么这段代码不起作用？如果div向左滚动，背景必须更改。 contentcontentcontentcontentcontentcontentcontentcontentcontentjquery scrollLeft（）不工作

$(function() { 
 
    scrollLeft = $('.page').scrollLeft(); 
 
    if (scrollLeft > 12) { 
 
    $('.main-header').addClass('notleft'); 
 
    } else { 
 
    $('.main-header').addClass('left'); 
 
    } 
 
});

.page { 
 
    width: 600px; 
 
    overflow-x: scroll; 
 
} 
 

 
.wrap { 
 
    width: 1000px; 
 
} 
 

 
.notleft { 
 
    background: red; 
 
} 
 

 
.left { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page"> 
 
    <div class="wrap"> 
 
    <header class="main-header"> 
 
     dnjdksvnkjsdvdjskv 
 
    </header> 
 
    </div> 
 
</div>

来源

2017-02-17 A.Bewley

['.scrollLeft（）']（https://api.jquery.com/scrollLeft/）：“_Get的**当前水平位置的**滚动条为匹配元素集中的第一个元素，或者为每个匹配元素设置滚动条的水平位置。“ – Andreas

你的代码有两个问题。首先，您需要在.page元素的scroll事件处理程序中执行它。在负载上运行意味着什么都不会改变。其次，您需要使.notleft CSS规则更具体，以便覆盖.left规则并更改背景。尝试：

$(function() { 
 
    $('.page').scroll(function() { 
 
    scrollLeft = $('.page').scrollLeft(); 
 
    if (scrollLeft > 12) { 
 
     $('.main-header').addClass('notleft'); 
 
    } else { 
 
     $('.main-header').addClass('left'); 
 
    } 
 
    }).scroll(); 
 
});

.page { 
 
    width: 600px; 
 
    overflow-x: scroll; 
 
} 
 

 
.wrap { 
 
    width: 1000px; 
 
} 
 

 
.left { 
 
    background: green; 
 
} 
 
.left.notleft { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="page"> 
 
    <div class="wrap"> 
 
    <header class="main-header"> 
 
     dnjdksvnkjsdvdjskv 
 
    </header> 
 
    </div> 
 
</div>

来源

2017-02-17 14:25:00

它的工作原理！谢谢！ –

jquery scrollLeft（）不工作

回答

相关问题