Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 锁定垂直滚动_Html_Css_Scroll_Position - Fatal编程技术网

Html 锁定垂直滚动

Html 锁定垂直滚动,html,css,scroll,position,Html,Css,Scroll,Position,我有一个图像,我需要它水平滚动,因为响应菜单将内容向左移动 垂直固定徽标始终垂直固定 我想锁定垂直滚动,但让水平滚动工作 我想要这样的东西 vertical.position:fixed horizontal.position:relative 但是如果不可能的话,我想知道是否有可能为标志制作一个触摸盒。 我已经尝试过溢出和位置。。。 多谢各位 HTML 您可以使用overflow-y:hidden禁用垂直滚动 div{ 宽度:200px; 高度:150像素; 溢出-x:滚动; 溢出y:隐藏

我有一个图像,我需要它水平滚动,因为响应菜单将内容向左移动 垂直固定徽标始终垂直固定

我想锁定垂直滚动,但让水平滚动工作

我想要这样的东西

vertical.position:fixed
horizontal.position:relative
但是如果不可能的话,我想知道是否有可能为标志制作一个触摸盒。 我已经尝试过溢出和位置。。。 多谢各位

HTML


您可以使用overflow-y:hidden禁用垂直滚动

div{ 宽度:200px; 高度:150像素; 溢出-x:滚动; 溢出y:隐藏; 空白:nowrap; 边框:1px000 } Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件的发布,包括Lorem Ipsum版本。
你能给我们一个代码的JSFIDLE链接吗?请在你的问题中添加代码这是很多代码。。。但我会加上容器,和酒吧区。。。请稍等,运行上面的代码段。您可以添加图像,而不是文本。我明白您的意思,我会尝试使用我的代码,我会在一分钟内通知您。。。谢谢
<div class="site-wrap">
    <div id="bar">
        <div id="baar">
            <img src="images/logo2.png" alt="logo2" width="124" height="56" />
        </div>
    </div>
</div>
#bar {
     height: 88px;
     width: 100%;
     position: relative;
     top: 0;
     left: auto;
     z-index:2;
     float: right;
 }
 #baar {
     height: 56px;
     width: 100%;
     background: linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%);
     background: -moz-linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%);
     background: -webkit-linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%);
     background-image: -ms-linear-gradient(top left, #e3e3e3 0%, #f9f9f9 100%);
     background-image: -o-linear-gradient(top left, #e3e3e3 0%, #f9f9f9 100%);
     background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f9f9f9), color-stop(1, #e3e3e3));
     background-image: linear-gradient(to bottom right, #e3e3e3 0%, #f9f9f9 100%);
     box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
     box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
     position: relative;
     overflow-y: inherit;
     left: auto;
     text-align: center;
     margin-top: 16px;
     top:0;
 }
 .site-wrap {
     min-width: 100%;
     min-height: 100%;
     background-image: url(images/pat3.png), url(images/pat.gif);
     background-size: 100% 100%, auto;
     position: relative;
     top: -18;
     bottom: 100%;
     left: 0;
     z-index: 1;
 }