【问题标题】:CSS/ HTML Use website and website <div>'s as / like a scrollbarCSS/ HTML 使用网站和网站 <div>'s as / like a scrollbar
【发布时间】:2012-04-05 16:52:51
【问题描述】:

我现在正在编写我的网站,试图保持更保守,但使用更新的设计。 我为我的网站选择的设计是类似于 Windows (R)“Metro”的设计,如我的另一个问题 (Question) 中所述

我已经让它看起来有点像 Metro,使用的不是垂直滚动条而是水平滚动条。 现在我正在尝试添加用户可以单击任何内容的选项,并且在单击并按住时,用户应该能够“拖动”网站(就像我可以“拖动”iPhone 的页面一样),

或者当距离网站“边缘”10像素左右时,鼠标悬停时,网站应该自行“拖动”。

提前感谢您,这是我目前的网站:I Use Chrome to display my site because it displays the css like i want it

或者这里是我的意思的快速截图:

左右是边缘,如您所见,&lt;div&gt; 不是完整的,而是通过拖动将其截断,我的意思是滚动它们直到它们作为一个整体显示。

最大宽度

【问题讨论】:

  • 如果您阅读我的描述,它是:我如何实现这一目标?如何制作我的网站,以便人们可以点击其中的一部分并使用触摸屏将其拖动?
  • 到目前为止你尝试过什么?你在 javascript/jQuery 方面有多好?您的网站缺少&lt;!doctype html&gt; 并且底部的脚本标签放错了位置,它属于&lt;body&gt;
  • thx,我对javascript / jQuery不太擅长,事实上我从昨天开始才知道jQuery的存在,我只知道大约半年前我在学校学到的东西-> HTML和CSS
  • 你不能用 css 来实现,你需要 javascript 来实现这个效果。所以我猜你先做一些基本的东西开始学习它;)

标签: html css drag horizontal-scrolling


【解决方案1】:

重要的一点是不要违背惯例。在移动设备上,用户习惯于能够拖动页面。但是在台式计算机上,单击并拖动鼠标要么用于选择文本,要么用于拖动内容(例如,将图像从网页拖动到另一个应用程序)。在台式计算机上滚动通常使用滚轮或键盘完成。当网站没有像他们期望的那样做出反应时,访问者可能会变得非常烦躁......

话虽如此,你可以使用像Dragscrollable这样的jQuery插件来实现这个效果。

要在边缘附近滚动,您可以使用 jQuery 插件 Smoothdivscroll 的 Hotspot 选项。

我对这些插件没有任何经验。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多