如何计算水平滚动位置

Question

我做了一个水平滚动网站。 主要问题在于，首次加载或刷新时，我无法突出显示活动菜单项。

我也无法将活动链接永久保留在家里。 因为如果用户在其他页面上处于活动状态时刷新页面，则主页将突出显示。 我的网站与此网站相似： 类似于该网站的网站

Answer 1

如果使用的是jQuery，则可以使用.scrollLeft()获取页面的水平滚动（以像素为单位）。

像这样：

$(window).scroll(function() {
    var scroll = $('html, body').scrollLeft();
    // do stuff with the value...
});

Answer 2

检查一下... http://jsfiddle.net/aGCVt/2/

您还可以使用document.getElementById（'container'）。scrollLeft =您的页面宽度；

HTML

<button onclick="gotoPage(0)">First</button>
    <button onclick="gotoPage(1)">Second</button>
    <button onclick="gotoPage(2)">Third</button>
    <div style="white-space: nowrap; overflow: auto; width: 500px;height: 300px;" id="container">
        <div id="firstPage" class="common"></div>
        <div id="secondPage" class="common"></div>
        <div id="thirdPage" class="common"></div>
    </div>

CSS

.common {
    width: 500px;
    height: 300px;
    display: inline-block;
}

#firstPage {

    background-color: red;
}

#secondPage {
    background-color: yellow;
}

#thirdPage {
    background-color: green;
}

JAVASCRIPT

function gotoPage(pageNo) {
    var scroll = 500 * pageNo;
    document.getElementById('container').scrollLeft = scroll;
}

您还可以使用jquery $（'＃container'）。scrollLeft（）。