Have a look at Facebook's message module. When you're looking at a conversation you see a list of messages contained in a div. The list is "scrolled down to the last message" when you load the page. Scrolling up (using your scrollbar to the right) takes you upwards in the list, showing you older messages.
Trying to dissect this from the code isn't an easy task, at least not for me, but I have noticed that the header containing the name of the person you're talking with and some buttons has the style position:fixed.
If someone could provide some insight as to how this feature is done or provide links to a tutorial/explanation of it I'd be very happy.
Thanks
I haven't had a look at their code however the simplest answer I can think of is that the main page container is set with position: fixed; and the message section is simply positioned as a normal element on the page.
This would give the illusion that the scroll bar only scrolls the message portion when infact the page is scrolling as normal, just with the container staying in place.
Related
Is there a way to make a link that will scroll the visited page, say, 600 pixels from the top or the bottom?
And I'm not thinking about scrolling to an anchor...
I want to make a link about device support for iOS and the best results are on this page: https://www.apple.com/augmented-reality/
but the part about the device support is at the same bottom and there is no proper anhora or ID tag to scroll to.
So, wouldn't it be great if I could write, for example:
href="https://www.apple.com/augmented-reality#bottom&600" or something to scroll to 600px from the bottom edge? Does anyone know if it can be done?
Maybe Chrome's feature "Scroll to text fragment" could help for this.
Just add #:~:text={text} to the url, where {text} is some text that should be highlighted and scrolled to.
In your example, this could look like this:
https://www.apple.com/augmented-reality/#:~:text=Snapchat
I don't know if this always works reliably, but it's the only way I can think of at the moment.
Edit: I just realized that the link doesn't work as expected on first try but when reloading...
I am building a blog website driven by Hexo. After I changed the font-size and resized the left panel, the vertical scrollbar contains some contents belong to the blog article contents when refresh the webpage every time. However, when I change to another web-tab(like wiki or something else) and back to the blog page tab, the scrollbar turns working normally.
I have no idea why this happened. And I am trying to fix this issue. The weird scrollbar capture is provided below. The pink element is scroll thumb and others are the elements should belong to blog article content.
I will appreciate if anything would be helpful.
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
This is probably a really simple question. I have a link on the page tsawebmaster1.hhstsa.com/web_design.html that links to a div on the same page as the link itself using tsawebmaster1.hhstsa.com/web_design.html#seven_steps and it works just fine. The problem is that my fixed header is at the top of the page and thus overlaps the content by 100px, so when it takes you to that div, the user does not see the top of the div linked to. Is there a way I can link 100px less than a certain div.
I don't know if this will work but you should try this:
Our seven core steps to web design will teach you the simple steps on how a website is built. Before delving into any new topic, it is important to develop background knowledge of the whole picture. This way, when you start actually learning web design in depth, you'll be able to connect your under
Try put an empty paragraph between your logo and the contents.
You better use javascript to reach your goal. the window.scrollTo(x,y) function can make your page scroll to a specified amount of pixels on click (also it will look much more neat).
documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.scrollTo
usage:
click to scroll down 100 pixels
I'm using the Perfect Scrollbar jQuery app (http://www.yuiazu.net/perfect-scrollbar/) for this site:
http://thehummingbirdplace.com/
The scrollbar shows up when you hover over the News section, but it won't scroll down to reveal the content. I've used this scrollbar before successfully, so I'm stumped as to what is different now. I haven't been able to replicate this on a simpler page, when I experiment on another page it either works or just vanishes, so I'm not sure why it is successfully showing up, yet not scrolling on the main page.
I've tried taking out the second use of jQuery on the page too, just in case, but I get the same result.
Any help would be appreciated!!
The error was in the set up for the jQuery.noConflict(); command and has now been fixed