左側滾動無滾動條

阿新 • • 發佈：2019-02-14

在左右分欄中，當左側的過長的時候，如果position是fixed的時候就不會滾動，

<style type="text/css">
    .left{position: fixed;width: 200px; background: gray;top: 0;bottom:0;height: 100%;overflow-x: hidden;}
    .content-border{overflow-x: hidden;width: 220px;height: 100%}
    .left-content{width: 200px;}
    .part1{width: 200px;height: 100 
px;background: red;border:1px solid green;}
</style>
<body>
<div class="left">
<div class="content-border">
  <div class="left-content">
    <div class="part1">1</div>
    <div class="part1">2</div>
    <div class="part1">3</div>
    <div 
 class="part1">4</div>
    <div class="part1">5</div>
    <div class="part1">6</div>
    <div class="part1">7</div>
    <div class="part1">8</div>
    <div class="part1">9</div>
    <div class="part1">12</div>
    <div class 
="part1">11</div>
    <div class="part1">14</div>
   </div>   
   </div>   
</div>

主要是外面的content-border 他的3個屬性缺一不可，然後最外層的overflow-x:hidden也是需要的,結果實現了左側的無滾動條滾動

左側滾動無滾動條

在左右分欄中，當左側的過長的時候，如果position是fixed的時候就不會滾動， <style type="text/css"> .left{position: fixed;width: 200px; background: gra

jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條

p s load grid 技術如果 fan 垂直滾動條收藏解決 jquery easyui datagrid 無滾動條，datagrid 沒垂直滾動條 ============================== 蕃薯耀 2018年2月6日 http://www

css 背景圖鋪滿整個螢幕無滾動條

kk總結了兩種方式實現背景圖鋪滿整個螢幕並且無滾動出現的方式，下面來一一介紹：方法一：先上個效果圖 html頁面：一個用來放背景圖的容器.bg <body> <div class="main"> <div class="b

純 css 實現 PC 端無滾動條滾動樣式分享

由於接觸過各種後臺管理平臺開發，我們的開發介面一般左側導航欄，右側內容區域。在左側呢一旦超出高度在不同的瀏覽器就會顯示滾動條。嚴重影響頁面美觀。在這裡呢主要是講的css實現 PC 端無滾動條滾動樣式。下面直接上程式碼：html：<div class="box-wrapp

css textarea 高度自適應,無滾動條

用css控制textarea文字域的高度隨內容的變化而變化,不出現滾動條. CSS程式碼: 複製程式碼程式碼如下:.t_area{ width:300px; overflow-y:visible } <textarea class="t_area"> 隨便在這裡

左側隨著頁面滾動固定 fixed. scroll .scrollTop

style itl text htm width offset echo 代碼 images 1.圖片. 要求:隨著頁面滾動 . 左側應該頂著瀏覽器頂部, 向上回滾, 就恢復原狀. 2. 代碼: html 1 <div class="

js滾動顯示: 滾動條置頂/底

java div javascrip chat scrip win eight height hat <script> //當聊天室的內容超出頁面範圍時，如何讓頁面刷新後顯示最下面的內容 document.getElementByIdx ( ‘chatb

javascript 模擬滾動隱藏滾動條

top dev func chef for code pre one asc 想隱藏掉難看的滾動條，四處翻看博客,思路來源https://www.cnblogs.com/chefweb/p/6473517.html，不知道有沒有更好的思路，先湊合著用吧。 html

列表垂直向上迴圈滾動(每次滾動一條)

<ul id="Scroll"> <li>1.多發發沙發沙發發防輻射服</li> <li>2.框架來軍軍軍軍綠軍綠軍綠軍</li> <li>3・一一飛灑發拉設計費垃圾粉拉資料弗利薩就發設

Android之高仿京東APP首頁“京東快報”自動向上滾動的廣告條

##前言上次在京東APP上買東西時，發現首頁中間有塊叫“京東快報”的欄目，其中廣告條能自動向上滾動，效果還不錯，看到這個效果，第一個念頭就是我能不能實現，於是就誕生了這篇文章。我們看看實現後的效果： ##實現原理起初看到這個效果時，第一個想法就是向上移

python中selenium關於滾動條的迴圈下拉滾動操作---滾動條操作

# -*- coding: utf-8 -*- # @Time : 2018/6/19 10:54 # @Author : 清心 def xh(): t = True time.sleep(1) while t: driver.ex

系統左側選單上下滾動功能

鑑於系統左側導航選單的欄目過多，出現有些模組看不到的情況，考慮做一個選單上下滾動。目前系統左側導航選單是easyui的手風琴效果，UI更新後是圖片和文字配合形式。以下是對於過程的整理：一、方案的查詢與確定 1、方案1（引入js外掛）嘗試結果：匯入外掛，導航模組那裡不能

固定層不隨滾動條滾動而滾動(純CSS,相容IE6,IE7,IE8,Firefox,Safari)

使用CSS來固定層，此層不隨滾動條滾動而滾動，固定層分三個位置：頁面頂端：頁面中央：頁面底層： StaticContent.css檔案： /*******呼叫<div id="fiexd-headerIE6"></div>****

Android 上下滾動的廣告條

有些應用裡面會有一些上下滾動文字的廣告，尤其是關於商城裡面的容易出現，具體的效果相比大家也見過，先看看效果吧這是怎麼實現的呢，有人說是用TextView實現，有的說這是跑馬燈效果。其實說TextView實現這種效果的同學只是說對了一半，這個效果的實現是離

ScrollView巢狀GridView,ListView自動滾動到第一條Item的解決辦法

當ScrollView下巢狀GridView或ListView時，如果內容超過一屏預設位置不在ScrollView的頂部，用scrollViewMsg.scrollTo(0,0)設定也不起作用，這是因為巢狀GridView或ListView獲了焦點，解決方法有如下幾種：

頁面內滾動條區域性滾動分頁div滾動事件滾動分頁非同步滾動分頁 ajax滾動

關於滾動事件參考了:http://blog.csdn.net/greenqingqingws/article/details/38018225,謝謝關於後臺的分頁可以參考:http://blog.csdn.net/noteless/article/details/5017

div隨著屏幕滾動而滾動

java ima doc left top function rip off fse <script type="text/javascript"> $(document).ready(function () { var menuY

css基礎 background-attachment 背景圖是固定的,不隨內容的滾動而滾動

utf-8 背景基礎 gpo -a logs col 且行且珍惜 mage 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

結算系統時候用到的左側遞迴導航條功能

<template> <el-scrollbar wrapClass="scrollbar-wrapper"> <el-menu mode="vertical" :show-timeout="200" :default-act

結算系統時候用到的左側遞歸導航條功能

sco sid ons com mod time i++ script hidden <template> <el-scrollbar wrapClass="scrollbar-wrapper"> <el-menu m

左側滾動無滾動條

相關推薦