0

So I'm trying to get a specific element to be centered on the screen when the page loads. This element is flanked on both sides by an element that is 100% of the window width.

Eventually, there will be more sections and I'd like the user to be able to scroll freely between all of them, though for the purposes of the web app I'm doing, I need to be able to control the scrolling with javascript as well.

Here's a Fiddle to try it out. As you can see, it works fine the fiddle. Now, when I load it on my page, it flashes at the right position, then goes to wherever the browser thought it was last scrolled. If you load the page fresh, then that will be at 0. If you scrolled a little bit to the right, then whatever that variable is, it will take over and scroll the element to that spot instead of the designated spot. Sometimes you can see a flash of where the element is supposed to be, then it goes back to wherever the browser thought you were last.

You can see a live example of it here: http://www.playafterdj.com/index2.php

The simple HTML:

<div class="wrapper">
    <section class="fill"></section>
    <section class="init"></section>
    <section class="fill"></section>
</div>

the CSS:

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html, body {
    width:100%;
    height:100%;
    position:relative;
}
.wrapper {
    width:100%;
    height:100%;
    position:relative;
    white-space: nowrap;    
}
section {
    width: 100%;
    max-width: 640px;
    height: 100%;
    background-color: #313138;
    padding: 10px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: top;
}
section.fill {
    width: 100%;
    max-width:100%;
    margin-right: 0;
    background-color: transparent;
    padding:0;
}

and finally the JS:

$(window).load(function(){
    var winW = $(window).width();
    var sectionW = $('.init').width();
    var startPos = (winW/2)+(sectionW/2)+15;
    $('body').scrollLeft(startPos);
});

So, I get the right number with startPos. In the fiddle, you can test it out by scrolling and seeing that the startPos matches up with the scrollLeft() of the body. Unfortunately the browser overrides this. I've tried using these couple of answers with no avail:

Prevent automatic browser scroll on refresh

Disable brower's auto scroll after a page refresh?

Any advice?

Community
  • 1
  • 1
ntgCleaner
  • 5,865
  • 9
  • 48
  • 86
  • For a temporary solution, I just delayed the `scrollLeft()` by 300ms. It seems to work, but I find it sloppy and I think it would depend on the power of the user's computer/internet speed – ntgCleaner Sep 13 '15 at 02:25
  • "then goes to wherever the browser thought it was last scrolled" You mean it does to the place where it were last scrolled? If you're going to implement some sort of scroller, why not just leverage the built-in scroll funcitonality? And on page load, initiate it based on wherever the page is currently scrolled to? Wait. You're trying to scroll the `wrapper` div? Then you need to set `overflow-x:scroll;` on it. – Jan Sep 13 '15 at 02:25
  • @Jan, The `body` is what is technically scrolling. The wrapper is just holding it all in. Yes, the browser goes to the place it was last scrolled (I say "thought" because if there was no last scroll position, it believes the last position was zero). I think I see what you're saying. Get the scroll position, then basically subtract it from where it needs to be? – ntgCleaner Sep 13 '15 at 02:33
  • Ummm, I think you've misunderstood how this works. See my answer. – Jan Sep 13 '15 at 02:40

1 Answers1

1

It looks like you're trying to scroll the .wrapper div, but it's not set to be scrollable.

Set overflow-x:scroll; on .wrapper and it will work.

.wrapper {
    overflow-x:scroll;
}

http://jsfiddle.net/7ejL4koo/

Alternatively, if what you want to scroll is the body, instead of

$('.wrapper').scrollLeft(startPos);

do

$(document.body).scrollLeft(startPos);

http://jsfiddle.net/myydrL25/

Either method works.

Jan
  • 5,688
  • 3
  • 27
  • 44
  • Hmm. The `$(document.body)` method doesn't seem to work properly. The browser still takes over. It could just be on the body, because the `.wrapper` solution works just fine. I think I can manage to stick with that for the rest of this project. Thank you! – ntgCleaner Sep 13 '15 at 02:44
  • You might need to wrap it inside a `document.ready` or `document.load`. It works fine for me in the Fiddle though. – Jan Sep 13 '15 at 02:46
  • Yeah, the original fiddle worked really well, but it just wasn't working on my site. I had it under `$(document).ready()` and `$(window).load`, but neither of them were working. I've implemented the `.wrapper` scroll and it should be working out better for me with a little reformatting – ntgCleaner Sep 13 '15 at 02:57
  • Since the Fiddle works, I'd take that as a sign that something else is probably going on with your site. Maybe you're loading content dynamically, and the page can't scroll on `.load` because there's nothing to scroll. For example. – Jan Sep 13 '15 at 03:01
  • I've been looking into that as well, though this initial element is there on load in the html. – ntgCleaner Sep 13 '15 at 03:14