使不同位置类型的元素一起滚动
基本上，我正在尝试创建一个利用 jquery 的网页，以便滑入新内容。我开始使用本教程。 http://www.queness.com/resources/html/scroll/horizontal。 现在我花了几个小时试图找出解决这个问题的
方法..我发现借助图片可能更容易解释.. 
当您访问演示页面时会发生什么（见上文）。看起来所有内容 div 都并排加载，但只是不在视图中（即溢出设置为隐藏，因此您无法水平滚动。当您单击链接时，页面向左/向右滑动以转到 底部
现在我的网页有点不同，我把框弄得更大了，这意味着“内容”框（见图）覆盖了页面的
。向下滚动以查看其余内容。但这是我遇到问题的地方。
我使用了这个问题的答案：隐藏html水平但不是垂直滚动条 设置overflow-y:scroll和overflow-x:hidden，这似乎让我可以上下滚动，同时不会影响正在查看的内容框两侧的内容。 但是当它滚动时，内容会覆盖徽标。
问题： 我希望徽标与内容框垂直移动，以便它们不会相互重叠。但是当用户单击另一个框时，我想将徽标保留在顶部..当用户单击链接并且另一个内容框滑入时，徽标保留在第一个内容框上方。我正在考虑在每个内容框上都有一个徽标，但这看起来很俗气..我想给出内容滑入/滑出的效果..
我尝试过的：< /强> 我尝试过使徽标位置：相对。徽标上下移动，但我不确定如何防止它移出视图（即：从图表中，如果在这种情况下徽标位于 content1 上方，则单击 content2 时，content2 滑入并且徽标与 content1 一起隐藏）
将徽标保持为位置：固定。每当出现任何新内容框时，它都会保持在正确的位置，但是当我水平滚动时，它不会随内容框移动。因此它只是停留在那里，不会水平或垂直移动，并且在滚动时被内容框覆盖。
很抱歉问了这个冗长的问题。我很感谢您花时间阅读本文，如果您能对此有所了解，那将非常有帮助。谢谢您:)
为 Sohnee 编辑： 在玩了你做的 jsfiddle 东西之后..它似乎解决了一半的问题..基本上它完美地滑动（在我的代码和 js fiddle 上）所以谢谢你。但我仍然遇到滚动问题..我使用 safari，当你第一次加载页面（我的代码和你的 jsfiddle 代码）时，你看不到任何滚动条..（即使内容高度设置为 6/700px ）所以当我点击右下角就像我要调整浏览器窗口大小一样（我几乎没有移动它一个像素），滚动条会在我想要的正确位置弹出..并且它允许我垂直滚动页面而且滑动功能似乎也没有受到影响，这很好。但是一旦我刷新页面..滚动条就消失了..是否可以在页面加载时调出这种类型的滚动条并将其保留在那里？
（如果我放大一次然后缩小一次，滚动条也会出现）
我包含屏幕截图来解释我的意思..
之前： 
之后（调整窗口大小几乎没有一个像素）： 
您会注意到我向下移动了滚动条，并且它同步垂直移动了徽标和内容。无论如何要实现这个目标？ （本质上希望能够垂直滚动徽标和内容，同时防止幻灯片功能发生时徽标水平移动） （抱歉一直打扰您）
Basically, i am trying to create a web page that utilises jquery in order to slide in new content. i started out using this tutorial.
http://www.queness.com/resources/html/scroll/horizontal.html
now from that ive spent the several hours trying to figure out a way to solve this.. i find it may be easier to explain with the aid of a picture..
what happens when you visit the demo page (see above). it appears that all the content divs all load side by side, but just arent in view (ie. overflow is set to hidden hence you cant scroll horizontally. and when u click on a link, the page slides left/right to go to the correct box.
Now my webpage is a bit different in that ive made the boxes bigger. what that means is that the "content" boxes (see diagram) over lap the bottom of the page.
what i wanted to do was to be able to scroll down to view the rest of the content. but here is where i run into problems.
i used the answer on this question: Hide html horizontal but not vertical scrollbar
to set the overflow-y:scroll and overflow-x:hidden which seems to let me scroll up and down while not compromising the content boxes either side of the one being viewed.
but when it scrolls, the content goes over the logo..
Question:
i want the logo to move vertically with the content box so that they do not overlap one another. BUT i want to keep the logo at the top WHEN the user clicks on another box.. when the user clicks on a link and another content box slides in, the logo stays above the first content box. I was thinking of having a logo over each content box but this would look tacky.. and i wanted to give the effect of the content being slided in/out..
What ive tried:
Ive tried making the logo position:relative. the logo moves up and down but im not sure how to keep it from moving out of view (ie: from the diagram, if the logo was above content1 in this scenario, when content2 is clicked, content2 slides in and logo hides with content1)
keeping the logo as position:fixed. it stays in the correct place whenever any new content box appears BUT when i scroll horizontally, it does not move with the content box.. therefore it just stays there, doesnt move horizontally or vertically and gets covered up by the content box upon scrolling.
Sorry for the really long winded question.. i appreciate the time you've taken to read this and if you can shed some light on this it would be very helpful.. Thank you :)
Edit for Sohnee:
After playing around on the jsfiddle thing you made.. its seems to solve half the problem.. basically it slides perfectly ( on my code and on the js fiddle) so thank you for that. but im still having issues with the scrolling.. im using safari and when u first load up the page (my code and your jsfiddle code) you dont see any scrollbars.. (even if the content height is set to something like 6/700px) so when i click on the bottom right as if im going to resize the browser window ( i barely move it a pixel), a scrollbar pops up in exactly the right place that i want it.. and it allows me scroll the page vertically and the sliding function doesnt seem to be affected either which is good. but as soon as i refresh the page.. the scrollbar is gone.. might there be a away to bring up this type of scrollbar on page load and keep it there?
(scrollbar also appears if i zoom in once and then zoom out once)
ive included screenshots to explain what i mean..
before:
after (resizing window barely a pixel):
You'l notice that ive moved the scrollbar down and it moves the logo and content vertically in sync.. is there anyway to achieve this?
(Essentially wanna be able to scroll logo and content vertically, while preventing the logo moving horizontally when the slide function takes place)
(sorry to keep bothering you)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您已经差不多完成了，此时您已将徽标包含在可滚动区域中（我认为您正在使用实际的
body元素进行滚动。如果您用容器，例如
div并将您所做的所有操作应用于该div而不是整个文档，您的徽标不会受到影响...例如，在伪代码
中将更改为
您现在更改
$('body')到$('#scroller')。我根据原始示例创建了一个 JS Fiddle 来展示其实际情况
。 “http://jsfiddle.net/Sohnee/QB5hd/” rel="nofollow">http://jsfiddle.net/Sohnee/QB5hd/
You are almost there with this one, at the moment you have the logo included in the scrollable area (I think you are using the actual
bodyelement for scrolling.If you surround your scrollable "bits" with a container, such as a
divand apply all you've done to thatdivrather than to the entire document, your logo won't be affected...For example, in psuedo-code
Would change to
And you now change
$('body')to$('#scroller').I have created a JS Fiddle based on the original example to show this in action.
http://jsfiddle.net/Sohnee/QB5hd/
您可能需要引入另一个 div（例如 d1），它包围徽标和保存动态内容框的 div（例如 d2）。现在，如果您将overflow-y:scroll 和overflow-x:hidden 设置为d1，那么应该将它们保持在一起。
You may need to introduce another div (say, d1) that wraps around both logo and the div (say d2) that holds your dynamic content boxes. Now, if you set the overflow-y:scroll and overflow-x:hidden to that d1, that should keep them together.